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

Question

我只是下载320及以上的响应式设计,样式表分为以下几种:

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

和print.css,style.css和2x.css

我不明白为什么不是320.css样式表,或者我应该使用style.css作为该分辨率？

Answer 1

不,你说得对.任何低于480px的内容都会加载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.

我认为将该解决方案排除在外的想法是,您可以创建一些流畅或灵活的布局,这对两种分辨率都有效...