CSS3 媒体查询

CSS3 媒体查询1.什么是媒体查询CSS3媒体查询(MediaQuery)语法的特性:①使用@media查询,可以针对不同的媒体类型定义不同的样式;②@media可以针对不同的屏幕尺寸设置不同的样式;③当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面;④目前针对很多苹果手机、Android手机,平板等设备都用得到多媒体查询.2.媒体查询的语法规范@mediamediatypeand|not|only(mediafeature){/*CSS

1. 什么是媒体查询

CSS3媒体查询(Media Query)语法的特性:

①使用 @media 查询,可以针对不同的媒体类型定义不同的样式;
@media 可以针对不同的屏幕尺寸设置不同的样式
③当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面 ;
④目前针对很多苹果手机、Android手机,平板等设备都用得到多媒体查询.

CSS3 媒体查询

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>

CSS3 媒体查询CSS3 媒体查询

 CSS3 媒体查询CSS3 媒体查询

上述代码执行效果如上图,当我们改变浏览器窗口的宽度时,我们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

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注