如何管理CSS3媒体查询？

Question

由于有很多方法可以将CSS3媒体查询实现到网站中,我想知道哪些是经验丰富的网页设计师推荐的.我能想到一对夫妇:

1.一体化样式表

默认样式适用于所有屏幕宽度,并且媒体查询仅适用于较低的屏幕宽度并覆盖默认值,所有这些都在一个文件中.例如:

HTML

<link rel="stylesheet" href="main.css">

的main.css

article
{
    width: 1000px;    
}

@media only screen and (max-width: 1000px)
{
    article
    {
        width: 700px;
    }

}

(请记住,这只是一个例子)

优点:

• 默认样式适用于旧版浏览器
• 只需要一个HTTP请求

缺点:

• 用很多代码弄乱了
• 有些浏览器必须下载不适用的代码

2.单独的样式表

有单独的样式表包含为每个屏幕宽度定制的完整代码.浏览器仅加载适用的浏览器.例如:

HTML

<link rel="stylesheet" href="large-screen.css" media="screen and (min-width: 1001px)"> /*Also older browsers*/
<link rel="stylesheet" href="small-screen.css" media="only screen and (max-width: 1000px)">

大screen.css

article
{
    width: 1000px;
}

小screen.css

article
{
    width: 700px;
}

优点:

• 整洁有序
• 只需要一个HTTP请求
• 浏览器只加载他们需要的东西

缺点:

• (这就是为什么我对使用它犹豫不决:)当一个人做出适用于所有屏幕宽度的更改时,必须将更改复制并粘贴到所有样式表中的相应位置.

3.单独的样式表,一个全局样式表

与#1相同,但全局样式和媒体查询位于不同的样式表中.例如:

HTML

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="small-screen.css" media="only screen and (max-width: 1300px)">

的main.css

article
{
    width: 1000px;
}

小screen.css

article
{
    width: 700px;
}

优点:

• 也整洁和可管理
• 进行全局更改时没有#2的问题
• 全局样式适用于旧版浏览器

缺点:

• 较小的屏幕宽度需要2个HTTP请求

这就是我所能想到的.如何应媒体查询管理？

感谢您的回复.

Answer 1

好吧,我当然不能声称自己是这方面的权威(我自己还在学习编码约定),但我实际上倾向于选项#1 - 一个样式表.不过,我正在考虑它的具体实现.您需要新的样式,而不是每个屏幕大小的单个断点,我建议多个断点 - 一个用于需要解决多个屏幕尺寸的每个模块的CSS样式.

啊......这可能是一个有点令人困惑的声明.一个例子是为了......

而不是像:

/*default styles:*/
/*header styles*/
.header-link{  ...  }
.header-link:active{  ...  }
.header-image{  ...  }
.header-image-shown{  ...  }
.header-table-cell{  ...  }

/*content styles*/
.content-link{  ...  }
.content-link:active{  ...  }
.content-image{  ...  }
.content-image-shown{  ...  }
.content-table-cell{  ...  }

/*footer styles*/
.footer-link{  ...  }
.footer-link:active{  ...  }
.footer-image{  ...  }
.footer-image-shown{  ...  }
.footer-table-cell{  ...  }

/*alternate styles for smaller screens:*/
@media only screen and (max-width: 1000px){
    /*header styles*/
    .header-link{  ...  }
    .header-image{  ...  }
    .header-image-shown{  ...  }
    .header-table-cell{  ...  }

    /*content styles*/
    .content-link{  ...  }
    .content-image{  ...  }
    .content-image-shown{  ...  }
    .content-table-cell{  ...  }

    /*footer styles*/
    .footer-link{  ...  }
    .footer-image{  ...  }
    .footer-image-shown{  ...  }
    .footer-table-cell{  ...  }
}

我建议选项#1,只是如此实现:

/*default header styles*/
.header-link{  ...  }
.header-link:active{  ...  }
.header-image{  ...  }
.header-image-shown{  ...  }
.header-table-cell{  ...  }

/*alternate header styles for smaller screens*/
@media only screen and (max-width: 1000px){
    .header-link{  ...  }
    .header-image{  ...  }
    .header-image-shown{  ...  }
    .header-table-cell{  ...  }
}

/*default content styles*/
.content-link{  ...  }
.content-link:active{  ...  }
.content-image{  ...  }
.content-image-shown{  ...  }
.content-table-cell{  ...  }

/*alternate content styles for smaller screens*/
@media only screen and (max-width: 1000px){
    .content-link{  ...  }
    .content-image{  ...  }
    .content-image-shown{  ...  }
    .content-table-cell{  ...  }
}

/*default footer styles*/
.footer-link{  ...  }
.footer-link:active{  ...  }
.footer-image{  ...  }
.footer-image-shown{  ...  }
.footer-table-cell{  ...  }

/*alternate footer styles for smaller screens*/
@media only screen and (max-width: 1000px){
    .footer-link{  ...  }
    .footer-image{  ...  }
    .footer-image-shown{  ...  }
    .footer-table-cell{  ...  }
}

(所有课程都是占位符.我不是很有创意......)

虽然这意味着您将多次执行相同的媒体查询声明(导致更多代码),但测试单个模块会更方便,这将有助于您的网站变得更大时的可维护性.尝试添加多个真实样式,更多标签/类/ id到我给出的示例,并且可能为它们添加更多的空白,并且您很快就会看到缩小和更改/追加样式的速度有多快(跨越所有屏幕尺寸)在示例的第二部分所示的实现中.

我非常完全相信这个答案来自Jonathan Snook的可扩展和模块化架构的CSS.(毕竟,像我这样的初学者不可能自己弄清楚并推理出这样的答案!)正如该书的许多相关部分之一所引用的那样,

"...而不是在主CSS文件或单独的媒体查询样式表中有一个断点,而是在模块状态周围放置媒体查询."

但是,如果按照个人喜好或其他方式你不想使用这种方法,那么你可以自由选择你提出的任何其他选项 - 毕竟,Snook自己说他的书"比刚性框架更具风格指导" "所以不要觉得这是一个编码标准.(虽然我觉得应该是.XD)