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

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

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

文章为博主学习笔记,个人学习见解。若有误处,还请指教!


分享

上一篇:没有了

发表评论

提交评论

清空信息
关闭评论

评论列表

av atar
苏晨 1天以前
回复
@Robin :好漂亮的博客
谢谢!你的博客很不错哦,非常的炫酷
 Windows 7   Chrome 68.0.3440.84
av atar
Robin 1天以前
回复
好漂亮的博客
 Windows 10   Chrome 69.0.3497.100
av atar
章鱼资源网 2018-10-12 01:30:39
回复
章鱼资源网来访!祝此站越来越火
 vivo   Chrome 57.0.2987.132
av atar
汽修软件 2018-10-10 13:57:40
回复
厉害厉害
 Windows 10   Firefox 62.0
av atar
百度下拉代理 2018-10-09 14:01:28
回复
媒体查询 这个厉害的了
 Windows 7   Chrome 55.0.2883.87
av atar
苏晨 2018-10-08 21:59:20
回复
@响石潭 :学习,向博主学习
一起学习,共同进步face
 Windows 10   Chrome 68.0.3440.106
av atar
响石潭 2018-10-08 20:31:58
回复
学习,向博主学习
 Windows 10   Chrome 63.0.3239.132
av atar
苏晨 2018-10-08 11:04:18
回复
@演员 :挺好看的主题
谢谢!你的博客也非常不错哦。
 Windows 7   Chrome 68.0.3440.84
av atar
演员 2018-10-08 10:45:06
回复
挺好看的主题
 Windows 7   Chrome 63.0.3239.132
av atar
苏晨 2018-10-08 10:29:51
回复
@CloudCone优惠码 :朋友 交换链接吗
抱歉,暂时不换链
 Windows 7   Chrome 68.0.3440.84