对我来说HTML + CSS 相当复杂。 HTML + CSS + @media 是噩梦。现在我的HTML + CCS 看起来像意大利面条。请帮我解答问题：
SCSS 包括：按功能（页眉/页脚）
还是按尺寸（0_480）？ 【问题讨论】：
标签： html css responsive-design sass
测试网站的适应性可以轻松快捷！ http://plastilin5.com/tools/
【讨论】：
【讨论】：
关于如何使用@media 最大和最小宽度，一些开发者强烈主张“移动优先”，例如首先关注小屏幕的样式，然后覆盖大屏幕的样式。
我认为这与您的“仅最大宽度：0-420、0-870、无限制”选项最匹配。
【讨论】：
我认为这是最好的方法的主要原因是，对于较小的屏幕，您可以（并且很可能会）决定不显示某些元素，并且您可以通过简单地添加显示来做到这一点：没有;对于要隐藏的第一个（最大）分辨率的元素。当您以相反的方式构建 CSS 时，添加元素变得有点难以遵循。
【讨论】：
Sass 有他们所谓的“媒体查询冒泡”，这意味着无论您的媒体查询位于哪个嵌套级别，它们都会冒泡到顶部。如果您不负责任地使用它，这既是好事也是坏事（很好，您可以将媒体查询与相关样式分组，如果过度使用则不好，因为您最终会收到 100 多个媒体查询） .
我发现对我的工作流程有用的是尽可能将媒体查询与其所针对的内容块组合在一起。每个主要的样式块都被分解成自己的文件（主布局、图片库、客户端等），每个文件将具有尽可能少的媒体查询（通常只有 1 或 2 个，更复杂的通常只有 3 个或更多块）。
$x-small-device: 25em; // smallest
$small-device: 35em; // larger mobile
$medium-device: 55em; // tablet or really small desktop
.clients {
// no matter what resolution, these styles are always applied
@media (min-width: $small-device) {
// have our clients display in a 2-col layout
}
@media (min-width: $medium-device) {
// have our clients display in a 3-col layout
}
}
如果您尝试根据目标设备的宽度对其进行拆分，则在更改样式时更难找到样式所在的位置。
【讨论】：
好的，首先我认为你应该阅读更多关于 CSS 架构的内容。第一个问题有点复杂，涉及不同的概念。我建议检查OOCSS、SMACSS 或Atomic design。有一些非常棒的想法。我通常做的是在所有这些东西之间混合使用。我想你会发现它适合你的项目。 媒体查询不应基于设备或某些流行的分辨率。您应该根据您拥有的内容设置断点。尝试遵循移动优先概念，看看内容需要更新的地方。很多时候，不同的断点与您网站的不同部分有关。我的意思是一个媒体查询可能只引用应用程序的标头。另一个只有页脚等等。我还建议使用媒体查询冒泡。 IE。将这些部分放在要更改的容器中，而不是放在单独的文件中或当前文件的末尾。
【讨论】：