在媒体查询制作网页的时候有些地方需要注意一下。
(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等来快速开发响应式网站。
微信扫码查看本文
发表评论