一、什么是媒体查询
媒体指的就是各种设备 (移动设备, PC设备)
查询指的是要检测属于哪种设备
媒体查询: 通过查询当前属于哪种设备, 让网页能够在不同的设备下正常的预览媒体查询可以让我们根据设备显示的特征(视口宽度、屏幕比列、设备方向)来设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特征的条件表达式组成。
二、学习媒体查询的核心是什么?
实现页面在不同设备下正常预览 [判断当前设备]
媒体类型:
将不同的设备划分为不同的类型
all (所有的设备)
print (打印设备)
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相比会减小页面的请求。