媒体查询概念
CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式,当重置浏览器窗口大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
语法结构及用法
@media 设备名 only (选取条件) not (选取条件) and(设备选取条件)
@media only screen and (min-width:600px) and (max-width:1000px){
.d1{
width: 50%;
background-color: black;
}
}
//min-width表示最小宽度,max-width表示最大宽度
//上面代码表示当浏览器窗口宽度大于600px小于1000px时,class为d1的元素样式设置为宽度50%,背景为黑色
最后要注意的是在页面的头部之间加上下面这句∶
<meta name=“viewport” content=“width=device-width; initial-scale=1.0”>
meta viewport这个属性是在移动设备上设置原始大小显示和是否缩放的声明。
参数设置∶
width – viewport的宽度
height – viewport的高度
initial-scale – 初始的缩放比例
minimum-scale – 允许用户缩放到的最小比例
maximum-scale – 允许用户缩放到的最大比例
user-scalable – 用户是否可以手动缩放