Phi*_*ton 39 css css3 media-queries 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请求数量和文件大小的优缺点如何？
Wes*_*rch 41
样式表总是下载,不管当前的媒体,无论是screen,print或3D-glasses.
请参阅:为什么所有浏览器都下载所有CSS文件 - 即使是他们不支持的媒体类型？
因此,考虑到这一点,将它们全部保存在一个样式表中将减少http请求,而单独的样式表将始终创建更多请求而没有任何好处.