CSS3 媒体查询

最新推荐文章于 2024-04-16 00:00:00 发布

JJ_Smilewang

最新推荐文章于 2024-04-16 00:00:00 发布

阅读量7k

点赞数 11

分类专栏：页面布局文章标签： html5 前端

本文链接：https://blog.csdn.net/JJ_Smilewang/article/details/124212772

版权

页面布局专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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 就可以实现不同设备宽度页面元素大小的动态变化。

JJ_Smilewang

关注

11
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
CSS3 媒体查询

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

扫一扫