Question

所以我潜入了'响应式设计'并且对这是如何工作有了一个公平的理解。然而，我需要特别注意两件事情。

我的“逻辑”思维方式是这样的：如果屏幕尺寸小于320像素，那么做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) {}

这基本上说是屏幕大于290px，这样做，如果屏幕大于544px，那就行了。但我会在这里遇到同样的问题。 min-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");}

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文件比10个1kb文件更容易/更快。

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

上面的示例假设浏览器支持媒体查询。没有它，该网站将沦为它的屁股。如果您不是100％确定媒体查询支持（并且未使用Respond.JS），我建议将桌面网站置于全局样式中，然后重写为不必要的，以确保不支持浏览器的回退< / p>

Answer 2

你写的几乎是一种方法。但是像BoltClock说的那样，你有很多方法可以建立一个响应式网站。

但是，为了避免'双'css，你也可以制作一个主css文件。那些不需要在整个网站上更改的东西 - 无论屏幕大小 - 都会进入此文件。（例如你的字体）。除此之外，你的css文件确实是“巨大的”，这取决于你想要响应的程度。

如果要回答您的问题，这将是新标准......如果他想支持移动友好网站，还是取决于网站的所有者。

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

使用CSS3构建良好响应式设计的“正确”逻辑方法是什么？

2 个答案: