1. 什么是媒体查询
CSS3媒体查询(Media Query)语法的特性:
①使用 @media 查询,可以针对不同的媒体类型定义不同的样式;
②@media 可以针对不同的屏幕尺寸设置不同的样式;
③当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面 ;
④目前针对很多苹果手机、Android手机,平板等设备都用得到多媒体查询.
2. 媒体查询的语法规范
@media mediatype and|not|only (media feature) { /* CSS样式 */ }
①用 @media 开头 注意@符号
②mediatype 是媒体类型,比如常见的为screen(表示电脑屏幕、平板电脑、智能手机等)、print(表示打印机和打印预览)、all(表示所有设备)
③关键字 and not only
(1)and:表示可以将多个媒体特性连接到一起,相当于“且”的意思
(2)not:表示排除某个媒体类型,相当于“非”的意思,可以省略
(3)only:表示指定某个特定的媒体类型,可以省略④media feature 媒体特性 必须有小括号包含。每种媒体类型都具有各自不同的特性,根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解以下三个常用的:
(1)width:表示输出设备中页面可见区域的宽度
(2)min-width:表示输出设备中页面最小可见区域的宽度
(3)max-width:表示输出设备中页面最大可见区域的宽度
3. 应用:根据页面宽度改变背景变色
<style> div { height: 200px; background-color: yellow; /* 给div设置背景色为黄色 */ } @media screen and (min-width:600px) { div { background-color: skyblue; /* 表示屏幕尺寸大于等于600px时,背景色变为天蓝色 */ } } @media screen and (min-width:900px) { div { background-color: pink; /* 表示屏幕尺寸大于等于900px时,背景色变为粉色 */ } } @media screen and (min-width:1200px) { div { background-color: red; /* 表示屏幕尺寸大于等于1200px时,背景色变为红色 */ } } </style> <body> <div></div> </body>
上述代码执行效果如上图,当我们改变浏览器窗口的宽度时,我们div盒子的背景色会根据我们设置的条件进行改变,这就是媒体查询的作用。
需要注意以下两点点:
(1)媒体查询我们要按照从小到大或者从大到小的顺序来写,但是我们最喜欢的还是从小到大来写,这样代码更简洁
(2)最大值 max-width 和最小值 min-width都是包含等于的
4. 媒体查询+外部链接引入CSS
当样式比较繁多的时候,我们可以针对不同的媒体使用不同的css文件。方法,就是直接在link中判断设备的尺寸,然后引用不同的css文件。
4.1 语法规范
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
4.2 示例
<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 600px)"> /* 表示电子设备屏幕大于等于600px时,将会引用styleA.css这个css文件 */
5. 媒体查询+rem实现元素动态大小变化
结合昨日介绍的rem单位,我们知道rem是跟着html走的,所以有了rem,页面元素可以设置不同大小尺寸。而媒体查询可以根据不同设备宽度来修改样式,因此,媒体查询+rem 就可以实现不同设备宽度页面元素大小的动态变化 。
今天的文章CSS3 媒体查询分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/33648.html