CSS媒体查询（响应式布局）

【引言】媒体查询主要用于解决网页在不同设备宽度下渲染不同布局和样式，它可以让我们根据设备显示器的特性（视口宽度、屏幕比例、设备方向）等为其设定CSS样式。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备显示效果。

媒体查询和flex的适用情况

• 媒体查询：当页面结构发生变化时最好使用媒体查询；
• flex局部：如果只是宽高的变化，推荐使用flex布局；

媒体类型（常用）

类型	使用场景
all（常用）	所有设备
screen	电脑屏幕
print	文档打印模式

媒体查询语法

1. media：表示媒体；
2. screen：表示媒体类型设置为屏幕类型；
3. and：连接媒体类型和查询条件，左右两侧必须有空格；
4. width：规定固定的屏幕宽度；
5. min- width：规定屏幕的最小宽度，当屏幕宽度大于min-width时；
6. max-width：规定屏幕的最大宽度，当屏幕宽度小于max-width时。

代码实现

<style>
    /* 屏幕在 400px ~ 600px 之间，背景色为pink */
    @media (min-width: 400px) and (max-width: 600px) {
        body {
            background-color: pink;
        }
    }

    /* 屏幕大于 600px 之间，背景色为skyblue */
    @media (min-width: 600px) {
        body {
            background-color: skyblue;
        }
    }
</style>

效果图：

• 屏幕宽度小于600px时，背景颜色为pink颜色

• 当屏幕宽度大于600px时，背景颜色为skyblue

加载方式

1. style标签上加载

<style media="(min-width:500px)">
    .box{
        height: 400px;
        background-color: red;
    }
</style>
<style media="(man-width:500px)">
    .box{
        background-color: skyblue;
    }
</style>

2. @import使用时加载

@import url(./index.css) (min-width:500px); 
@import url(./style.css) (max-width:600px);

• 加载最后的（）里面定义媒体查询用来判断显示样式。

3. 标签加载

<picture>
    <source media="(min-width:500px)" srcset="./images/pro_1.jpg" >
    <source media="(min-width:500px)" srcset="./images/pro_2.jpg" >
    <img src="./images/pro_3.jpg" alt="">
</picture>

• 根据设备的不同尺寸显示不同的图片，如果设备或者浏览器不支持picture属性，则使用img元素。

【往期分享】

• CSS盒子水平垂直居中： juejin.cn/post/708234…