CSS媒体查询看这篇就够了

最新推荐文章于 2024-09-20 14:49:00 发布

前端搬运工

最新推荐文章于 2024-09-20 14:49:00 发布

阅读量2.1k

点赞数 6

分类专栏： Web开发文章标签：媒体查询 CSS3 CSS2 media

本文链接：https://blog.csdn.net/weixin_42989576/article/details/87923111

版权

Web开发专栏收录该内容

70 篇文章 3 订阅

订阅专栏

灵魂三问：

什么是媒体查询
为什么要媒体查询
媒体查询具体用法

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

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

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

<link rel="stylesheet" type="text/css" media="screen and (max-width: 1200px)" href="style.css">

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

<link rel="stylesheet" type="text/css" media="(orientation: portrait)" href="main.css">

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

@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之间：
在这里插入图片描述
屏幕大小在 320px-768px之间

屏幕大小小于等于320px

既然 CSS2 中就可以使用媒体查询功能，为什么 CSS3 还要在此基础上修改呢？是因为用 CSS3 的方法能够减少 link 请求，提高浏览器加载速度。