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

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}

这个问题是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) {}

这基本上就是说屏幕大于290px,这样做,如果屏幕大于544px,那就行了.但我会在这里遇到同样的问题.Code in 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文件比10个1kb文件更容易/更快.

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

上面的示例假定浏览器支持媒体查询.没有它,该网站将沦为它的屁股.如果您不是100%确定媒体查询支持(并且没有使用Respond.JS),我建议将桌面网站放在全局样式中,然后重写为不必要的,以确保不支持的浏览器的后备