css - 320 及以上移动框架 - 为什么样式表从 480 开始？

Question

我刚下载 320 and up对于响应式设计，样式表划分如下:

• 480.css
• 600.css
• 768.css
• 992.css
• 1382.css

还有 print.css、style.css 和 2x.css

我不明白为什么不是 320.css 样式表，或者我应该使用 style.css 来解决这个问题？

Answer 1

不，你是对的。任何小于 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 .

我认为将分辨率排除在外的想法是，您将创建一些适用于两种分辨率的流畅或灵活的布局...