CSS媒体查询

CSS媒体查询

一、总结

一句话总结：

媒体查询主要是根据浏览器的特性（窗口大小、横竖屏、屏幕比例等）设置不同的样式，主要由三部分构成媒体类型（比如screen）、媒体属性（比如宽、高、屏幕类型）、关键字（and、only等）构成，@media not|only mediatype and (expressions) { CSS 代码...;}

1、什么是媒体查询？

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

2、为什么要媒体查询？

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

3、媒体查询具体使用实例？

@media screen and (max- 960px) { 样式规则代码 }

@media screen and (max- 960px) {  // 屏幕小于960px时显示灰色
    body {
        background: #999;
    }
}

4、媒体查询语法？

@media not|only mediatype and (expressions) { CSS 代码...;}

@media not|only mediatype and (expressions) {
    CSS 代码...;
}

5、css2中媒体查询实例？

css2中媒体查询加在link标签里面：link rel="stylesheet" type="text/css" href="index.css" media="screen"

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

二、CSS媒体查询看这篇就够了

转自或参考：CSS媒体查询看这篇就够了_weixin_42989576的博客-CSDN博客
https://blog.csdn.net/weixin_42989576/article/details/87923111

灵魂三问：

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

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

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

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

<link rel="stylesheet" type="text/css" media="screen and (max- 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- 960px) {  // 屏幕小于960px时显示灰色
    body {
        background: #999;
    }
}

@media screen and (max- 768px) {  // 屏幕小于768px时显示#03a9f4（蓝色）
    body {
        background: #03a9f4;
    }
}

@media screen and (max- 320px){  // 屏幕小于768px时显示#ff5722（橘黄）
    body {
        background: #ff5722;
    }
}

显示结果：
屏幕大小在 768px-960px之间：

屏幕大小在 320px-768px之间

屏幕大小小于等于320px

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