CSS3之媒体查询@Media

一、什么是媒体查询

媒体指的就是各种设备 (移动设备, PC设备)
查询指的是要检测属于哪种设备
 
媒体查询: 通过查询当前属于哪种设备, 让网页能够在不同的设备下正常的预览

媒体查询可以让我们根据设备显示的特征（视口宽度、屏幕比列、设备方向）来设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特征的条件表达式组成。

 

二、学习媒体查询的核心是什么?

实现页面在不同设备下正常预览 [判断当前设备]

媒体类型：将不同的设备划分为不同的类型

1. all (所有的设备)
2. print (打印设备)
3. screen (电脑屏幕,平板电脑,智能手机)

媒体特性：用来描述设备的特点,比如宽度,高度...

• width 网页显示区域完全等于设置的宽度
• height 网页显示区域完全等于设置的高度
• max-width / max-height 网页显示区域小于等于设置的宽度
• min-width / min-width 网页显示区域大于等于设置的宽度
• orientation: portrait (竖屏模式) | landscape (横屏模式)

 

语法关键字

     目的将媒体类型和媒体特性链接到一块,进行设备检测

• and 可以将多个媒体特性链接到一块,相当于且
• not 排除某个媒体特性 相当于非,可以省略
• only 指定某个特定的媒体类型, 可以省略

 

三、媒体查询如何使用？

meta标签：在网页头部添加这一行代码

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

这几个参数的意思：

• width=device-width 屏幕和设备同宽
• initial-scale=1.0 初始的缩放比例
• maximum-scale=1.0 允许用户缩放的最大比例（默认为1.0）
• minimum-scale=1.0 允许用户缩放的最小比例（默认为1.0）
• user-scalable=no 用户是否可以手动缩放（默认为no） 

 

 

外联式语法：<style>或者<link>标签上(这种主要针对媒体类型做区分)

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

<style media="screen and (max-width:1000px)" >
div{
  color:red;
}
</style>

 

内嵌式语法：@media 媒体类型 and (媒体特性) {你的样式}@media 媒体类型 and (媒体特性) {你的样式}

@media screen and (max-width:1440px) {
    .box_wrap .boxtext .box_bg {
        width: 26%;
    }

}

多个条件联写
@media screen and (max-width:1366px)  and (max-height: 500px){
    .box_wrap .boxtext .box_bg {
        height: 30%;
    }

}

Media Query早在CSS2的时候就出现，CSS2用<link />标签，而CSS3用@media定义的CSS里面。两者用法类似，但是CSS3与CSS2相比会减小页面的请求。