媒体查询

媒体查询概念

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 – 用户是否可以手动缩放

百度百科