html - 使用 CSS3 构建良好响应式设计的 "correct"逻辑方法是什么？

Question

因此，我深入研究了“响应式设计”，并对它的工作原理有了相当的了解。然而，有两件事我特别需要弄清楚。

我的“逻辑”思维方式是这样的:如果屏幕尺寸小于 320px，则执行 A，如果屏幕尺寸小于 480px，则执行 B。

@media only screen and (max-width: 320px) { Do one thing here}
@media only screen and (max-width: 480px) { Do another thing here}

问题在于，如果屏幕宽度小于 320，max-width: 480px 中的 css 也会受到影响。

当我查看示例时，我看到他们正在使用类似的东西:

@media only screen and (min-width: 290px) {}
@media only screen and (min-width: 544px) {}
@media only screen and (min-width: 960px) {}

这基本上是说屏幕大于 290 像素，执行此操作，如果屏幕大于 544 像素，则执行该操作。但我会在这里遇到同样的问题。 min-width: 290px 中的代码也将用于任何大于 290px 的屏幕尺寸。

所以我能想到的唯一只适用于特定屏幕范围的解决方案是使用这个:

@media only screen and (max-width: 320px) {}
@media only screen and (min-width: 321px),
only screen and (max-width: 480px){}
@media only screen and (min-width: 640px),
only screen and (max-width: 481px){}

谁能给我一些建议？

查看示例，我看到了大量“冗余”代码。许多相同的代码被重复，只是具有不同的值:

@media only screen and (max-width : 930px),
only screen and (max-device-width : 930px){
    nav li a {
        width: 25%;
        border-bottom: 1px solid #fff;
        font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
    }

    nav li:last-child a, nav li:nth-child(4) a { border-right: none; }
    nav li:nth-child(5) a { border-bottom: none; }
}

@media only screen and (max-width : 580px),
only screen and (max-device-width : 580px){
    nav li a {
        width: 50%;
        font: 400 12px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    nav li:nth-child(even) a { border-right: none; }
    nav li:nth-child(5) a { border-bottom: 1px solid #fff; }
}

对于大型网站，我可以想象这将创建大量代码和大型 CSS 文件。

这会成为我们必须使用响应式设计的新标准吗？

是否可以选择执行以下操作？

@media only screen and (min-width: 640px) { @import url("css/640.css");}

Answer 1

一开始，您编写/引用的代码略多于必要的代码。

例如:

@media only screen and (min-width: 321px),
only screen and (max-width: 480px) {

也可以写成:

@media only screen and (min-width: 321px) and (max-width: 480px) {

你永远不应该在媒体查询中重复 CSS，任何为任何屏幕尺寸设置的东西，例如背景颜色或字体系列都应该在任何媒体查询之外设置。这意味着它只写一次并适用于所有。每个媒体查询中应该只有只影响特定大小的代码。 (例如宽度、字体大小等)

我不建议导入 css 文件等，只需将它们全部放在一个文件中，全局样式在顶部，然后在其下方的媒体查询中使用特定于屏幕尺寸的样式。不要被大的 css 文件拖延，下载一个 10kb 的文件比十个 1kb 的文件更容易/更快。

我制作了一个示例 .css 文件来向您展示 here .请注意，这会创建一个可怕的网站，它只是为了向您展示如何布局代码以及将什么放在哪里。

上面的例子假设浏览器支持媒体查询。没有它，该站点将一败涂地。如果您不是 100% 确定媒体查询支持(并且没有使用 Respond.JS )我建议将桌面站点置于全局样式中，然后覆盖不必要的内容以确保不支持浏览器的回退