CSS媒体查询看这篇就够了

逃离我推掉我的手 2022-03-16 00:46 168阅读 0赞

**灵魂三问：**

1.  什么是媒体查询
2.  为什么要媒体查询
3.  媒体查询具体用法

**1、什么是媒体查询**  
媒体查询就是可以根据浏览器的特性（窗口大小、横竖屏、屏幕比例等）为此设定不同的 CSS 样式。

**2、为什么要媒体查询**  
我们在制作网页的时候，希望可以根据用户的屏幕特性而展现不同的网页内容，让用户体验更好。

**3、媒体查询具体用法**  
早在 CSS2 开始就已经支持媒体查询了，只不过和 CSS3 不太一样。以下是 CSS2 用法：  
// 写在HTML的 head 标签中, 表示：屏幕小于等于1200px时才使用style.css样式

// 以下表示当屏幕为竖屏时才使用main.css

对于下面图中网页来说，我们想让它在不同的显示屏大小下，背景颜色不同。CSS3中用法（在style.css中添加）：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4OTU3Ng_size_16_color_FFFFFF_t_70]

@media screen and (max-width: 960px) {  // 屏幕小于960px时显示灰色
        body {
            background: #999;
        }
    }
    
    @media screen and (max-width: 768px) {  // 屏幕小于768px时显示#03a9f4（蓝色）
        body {
            background: #03a9f4;
        }
    }
    
    @media screen and (max-width: 320px){  // 屏幕小于768px时显示#ff5722（橘黄）
        body {
            background: #ff5722;
        }
    }

显示结果：  
屏幕大小在 768px-960px之间：  
![在这里插入图片描述][20190225193730139.png]  
屏幕大小在 320px-768px之间  
![在这里插入图片描述][20190225193700936.png]  
屏幕大小小于等于320px  
![在这里插入图片描述][20190225193624666.png]  
既然 CSS2 中就可以使用 媒体查询 功能，为什么 CSS3 还要在此基础上修改呢？是因为用 CSS3 的方法能够减少 link 请求，提高浏览器加载速度。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4OTU3Ng_size_16_color_FFFFFF_t_70]: /images/20220316/7d0a2a96da3b4ab9903b5b29c0af87b8.png
[20190225193730139.png]: /images/20220316/d7c75b2fee2d4e10bd5751ef1c25a3be.png
[20190225193700936.png]: /images/20220316/8baf73c57be04820bd977d29317021e2.png
[20190225193624666.png]: /images/20220316/adfff1f585544d318bac20e8094e8ddc.png