1

对我来说HTML+CSS是相当复杂的。HTML+ CSS+@media是噩梦。现在我的HTML+CCS看起来像意大利面条。请帮我解决问题：

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

6 回答 6

1

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

于 2012-09-29T20:04:10.403 回答
0

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

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

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

于 2012-09-27T12:59:00.070 回答
0
  1. 这是我所做的：
    • 仅为最大尺寸编写 CSS
    • 在 CSS 文件的末尾（如果项目很大，则为 @import）添加“@media screen and (max-width: 1700px)”并写入该分辨率的所有更改
    • 为每个需要的分辨率重复上一步

我认为这是最好的方法的主要原因是，对于较小的屏幕，您可以（并且很可能会）决定不显示某些元素，您只需添加 display:none; 即可做到这一点。对于要隐藏的第一个（最大）分辨率的元素。当您以相反的方式构建 CSS 时，添加元素变得有点难以遵循。

于 2012-09-27T13:07:46.827 回答
0

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

如果您尝试根据目标设备的宽度对其进行拆分，则在更改样式时更难找到样式的位置。

于 2012-09-27T14:28:14.053 回答
0

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

于 2013-08-23T13:41:07.233 回答
0

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

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

于 2012-09-27T13:15:13.403 回答