如何在我的项目中有效地应用响应式设计？

Question

我目前正在从事前端 Web 开发项目，并且正在努力实施响应式设计。我尝试了几种不同的方法，但它们似乎都有缺点，我不确定最好的方法是什么。

在前端 Web 开发项目中实施响应式设计的最佳实践有哪些？是否有任何特定工具或框架对这项任务特别有帮助？我如何才能确保我的设计在各种屏幕尺寸和设备上看起来都不错，而不牺牲性能或用户体验？

任何建议或见解将不胜感激。

Answer 1

为了开发响应式设计，您可以在您的项目中使用 TailwindCSS、Bootstrap、SemanticUI 等 UI 组件，您可以通过阅读 youtube 中的文档或视频来学习它们。但作为前端开发人员，您应该熟悉 css 中的 @media 来设计响应式网站。媒体查询像这个例子一样工作：

.my-div{
  background: red;
  width:250px;
  height:250px;
}

@media screen and (max-width:500px){
.my-div{
background:blue;
height:150px;
width:150px
}
}

<div class="my-div"></div>

更改页面大小并查看结果

在此示例中，媒体查询知道当页面宽度等于或小于 500 时，.my-div 应更改为蓝色并且更小一些