Question

对我而言HTML + CSS非常复杂。 HTML + CSS + @media是噩梦。现在我的HTML + CCS看起来像spagetti。请帮我解答一下问题：

我应该如何组织我的SCSS包含：按功能（页眉/页脚）或按维度（0_480）？
我应该如何使用@media限制：
- 仅限max-width：0-420,0-870，无限制
- min-width + max-width：0-420,421-870,871 +
- 仅限最小宽度：870 +，420 +，0 +

Answer 1

可以轻松快速地测试网站的适应性！ http://plastilin5.com/tools/

Answer 2

这是一个很好的例子（检查网站的下半部分）

http://m.alistapart.com/articles/responsive-web-design/

您可以将所有样式表导入放在标题中。

Answer 3

这是我的所作所为：
- 仅为最大尺寸编写CSS
- 在CSS文件的末尾（如果项目是大的话，则为@import）添加“@media screen and（max-width：1700px）”并写下该分辨率的所有更改
- 为每个需要的分辨率重复上一步

我认为这是最好的方法的主要原因是，对于较小的屏幕，您可以（并且很可能会）决定不显示某些元素，并且您将能够通过简单地添加显示来实现：没有;对于那些隐藏在第一个（最大）分辨率上的元素。当你以相反的方式构建CSS时，添加元素变得有点难以理解。

Answer 4

关于如何使用@media最大和最小宽度，一些开发人员会强烈争论“移动优先”，例如首先关注小屏幕的样式，然后覆盖更大屏幕的样式。

http://stuffandnonsense.co.uk/blog/about/320_and_up/

我认为这与您的“仅限最大宽度：0-420,0-870，无限制”选项最匹配。

Answer 5

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
    }
}

如果您尝试根据要定位的设备的宽度进行分解，则在更改样式时更难找到样式的位置。

Answer 6

好的，首先我认为你应该阅读更多关于CSS架构的内容。第一个问题有点复杂，涉及不同的概念。我建议您检查OOCSS，SMACSS或Atomic design。有一些非常棒的想法。我通常做的是在所有这些事情之间使用混合物。我想你会发现它适合你的项目。媒体查询不应基于设备或某些流行的解决方案。您应该根据您拥有的内容设置断点。尝试遵循Mobile First概念，查看内容需要更新的位置。通常，不同的断点与您站点的不同部分相关。我的意思是一个媒体查询可能只引用应用程序的标题。另一个只有页脚等。我还建议使用媒体查询冒泡。即将这些部分放在要更改的容器内，而不是放在单独的文件中或当前文件的末尾。

响应式网页设计+ SCSS网站组织

6 个答案: