css – 响应式网页设计中的单个或多个样式表

前端之家收集整理的这篇文章主要介绍了css – 响应式网页设计中的单个或多个样式表前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
简而言之:

在做响应式网页设计时,你应该使用一个还是多个样式表?

详细:

responsive design,你倾向于有一个主要的CSS块,然后其他位和块,以调整布局,当它到达某些断点。您可以使用以下两种方法之一构建代码

单个样式表

/* Main CSS */

@media only screen and (min-width: 480px) { /* CSS */ }
@media only screen and (min-width: 640px) { /* CSS */ }
@media only screen and (min-width: 800px) { /* CSS */ }

多个样式表

<link rel="stylesheet" media="screen" href="main.css">
<link rel="stylesheet" media="only screen and (min-width: 480px)" href="480.css">
<link rel="stylesheet" media="only screen and (min-width: 640px)" href="640.css">
<link rel="stylesheet" media="only screen and (min-width: 800px)" href="800.css">

看来,使用一个样式表将减少HTTP请求的数量,但是你会有一个更大的文件,其中将包含可能不被某些客户端使用的代码。多个样式表似乎保持文件大小降低,但是你有更多的HTTP请求。

你应该什么时候选择每种方法?在实践中,HTTP请求数和文件大小的利弊如何堆叠?

解决方法

样式表总是下载,无论当前媒体,无论是屏幕,打印或3D眼镜。

参见:Why do all browsers download all CSS files – even for media types they don’t support?

所以考虑到这一点,将它们全部保存在一个样式表中将减少http请求,因为单独的样式表将总是创建更多的请求而没有任何好处。

猜你在找的CSS相关文章