响应式布局

响应式布局是一个概念，即一个页面能够兼容多个终端，而不是为每个终端做一个特定的版本。这个概念是为了解决移动互联网浏览而诞生的

CSS3中的Media Query（媒体查询）

media query可以获取设备的宽和高device-width，device-height显示屏幕/触觉设备。
渲染窗口的宽和高width，height显示屏幕/触觉设备。
设备的手持方向，横向还是竖向orientation（portrait|lanscape）和打印机等。
画面比例aspect-ratio点阵打印机等。
设备比例device-aspect-ratio-点阵打印机等。
对象颜色或颜色列表color，color-index显示屏幕。
设备的分辨率resolution。

语法结构以及用法

@media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二{sRules}

举个例子，一个div元素，在屏幕宽320-240的时候隐藏

@media (max-width:375px) and (min-width: 240px){
  .div{
    display: none;
  }

媒体查询也可以使用文件的方式代替，在条件触发时生效，始终会被下载，写法：

注意

在页面的头部之间加上下面这句∶

meta viewport这个属性是在移动设备上设置原始大小显示和是否缩放的声明。