1。一体化样式表

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）

Answer 2

我相信“将代码放在您期望的位置”。如果一个样式需要覆盖，我希望我的代码能够覆盖默认样式，因此在同一个文档中。这样，从现在起一年后，当我查看代码时，我仍然会知道发生了什么。在另一种方法（每个断点单独的css文件）中，我需要记住goo在单独的文件中查找覆盖样式代码。没问题，除非我忘了我一年后就这样做了。猜猜这是个人偏好，浏览器并不关心。

Answer 3

如果您想使用第二个选项，有一种方法可以避免“复制+粘贴”您的移动和桌面版本的网站所需的全局样式，这些样式很方便，并帮助您在我的网站中保持一切更有条理意见和那是使用SASS。

你可以有类似的东西：

> CSS Folder
> Sass folder
 - _global.scss
 - _mobile_layout.scss
 - _desktop_layout.scss
 - main_mobile.scss
 - main_desktop.scss

将编译成

> CSS Folder
 - main_mobile.css
 - main_desktop.css

希望你觉得它有用^^

如何管理CSS3媒体查询？

1。一体化样式表

2。单独的样式表

3。单独的样式表，一个全局样式表

3 个答案: