css3@media 媒体查询的使用(二)

2019-01-15 21:18:36  阅读 696 次 评论 0 条

 在媒体查询制作网页的时候有些地方需要注意一下。

    (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等来快速开发响应式网站。



微信扫码查看本文
本文地址:https://www.yangguangdream.com/?id=2025
版权声明:本文为原创文章,版权归 编辑君 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?