在媒体查询制作网页的时候有些地方需要注意一下。
(1) 首先来解释一下遇到冲突时得机制
<link rel="stylesheet" type="text/css" href="style1.css" media="screen and (min-width: 800px)"> <link rel="stylesheet" type="text/css" href="style2.css" media="screen and (min-width: 600px) and (max-width: 800px)"> <link rel="stylesheet" type="text/css" href="style3.css" media="screen and (max-width: 600px)">
上面代码将设备分成3种,分别是电脑的屏幕宽度大于800px 时引用样式style1,宽度为 600-800px引用样式style2,以及宽度小于600px 时引用样式style2.那么假如宽度正好等于800px 时应该引用哪个样式?是样式style2,因为前两条表达式都成立,按css默认优先规则后者覆盖了前者。
因此,为了避免冲突,这个例子正常情况应该这样写:
<link rel="stylesheet" type="text/css" href="style1.css" media="screen"> <link rel="stylesheet" type="text/css" href="style2.css" media="screen and (max-width: 800px)"> <link rel="stylesheet" type="text/css" href="style3.css" media="screen and (max-width: 600px)">
(2) 设置主要断点。简单的理解就是,设备宽度的临界点。在Media Query 中,媒体特性 min-width 和 max-width 对应的属性值就是响应式设计中的断点值。使用主要断点创建媒体查询的条件,而每个断点会对应调用一个样式文件(或者样式代码)。如果以上都看不懂那说名你好不了解什么是media,请移步至文章 css3@media 媒体查询的使用(一)
对于断点的常见值主要分为 320px、480px、640px、768px、1024px 等。对media媒体查询已有熟练掌握,就可以去学习现成框架bootstrap等来快速开发响应式网站。

微信扫码查看本文
发表评论