我刚下载 320 and up对于响应式设计，样式表划分如下:
- 480.css
- 600.css
- 768.css
- 992.css
- 1382.css
还有 print.css、style.css 和 2x.css
我不明白为什么不是 320.css 样式表，或者我应该使用 style.css 来解决这个问题？
最佳答案
不，你是对的。任何小于 480 像素的内容都会加载 styles.css对于这些媒体查询，由 min-width 提供媒体查询的设置:
<!-- For all browsers -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" media="print" href="css/print.css">
<!-- For progressively larger displays -->
<link rel="stylesheet" media="only screen and (min-width: 480px)" href="css/480.css">
<link rel="stylesheet" media="only screen and (min-width: 600px)" href="css/600.css">
<link rel="stylesheet" media="only screen and (min-width: 768px)" href="css/768.css">
<link rel="stylesheet" media="only screen and (min-width: 992px)" href="css/992.css">
因此对于设备宽度，0 - 480px(包括 320px)的设计将进入 style.css
480 到 600 = 480.css
600 到 768 = 600.css
768 到 992 = 768.css
992+ = 992.css
但是如果你想对 320 分辨率进行更精细的控制，你可以添加另一个媒体查询:
<link rel="stylesheet" media="only screen and (min-width: 320px)" href="css/320.css">
然后创建 320.css css 目录中的样式表。此工作表适用于分辨率 320 - 480。这意味着现在任何小于 320 的内容都将加载 style.css .
我认为将分辨率排除在外的想法是，您将创建一些适用于两种分辨率的流畅或灵活的布局...
关于css - 320 及以上移动框架 - 为什么样式表从 480 开始？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8270721/