7

因此，我深入研究了“响应式设计”，并对它的工作原理有了一个公平的理解。但是，我需要特别注意两件事。

我的“逻辑”思维方式是这样的：如果屏幕尺寸小于 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}

这样做的问题是，max-width: 480px如果屏幕宽度小于 320，css in 也会受到影响。

当我查看示例时，我看到他们使用的是类似的东西：

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

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

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

@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");}
4

2 回答 2

5

首先，您编写/引用的代码比必要的要多。

例如：

@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 文件来向您展示。请注意，这将创建一个可怕的网站，它只是为了向您展示如何布局代码以及去哪里。

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

于 2012-11-23T10:21:26.623 回答
2

你写的几乎是一种方法。但就像 BoltClock 所说，你有很多方法可以制作一个响应式网站。

另外，为了避免“双重”css，您还可以制作一个主 css 文件。那些不需要在整个网站中改变的东西——不管屏幕大小——进入这个文件。（例如你的字体）。除此之外，您的 css 文件确实会“巨大”，具体取决于您想要响应的程度。

要回答您的问题，这是否会成为新标准……这仍然取决于网站所有者，他是否想要支持移动友好型网站。

我希望这会有所帮助 :) 祝你好运！

于 2012-11-23T10:12:37.627 回答