响应式布局是一个概念，即一个页面能够兼容多个终端，而不是为每个终端做一个特定的版本。这个概念是为了解决移动互联网浏览而诞生的
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;
}
媒体查询也可以使用文件的方式代替，在条件触发时生效，始终会被下载，写法：
<link style="style.css" media="media (max-width:375px)">
注意
在页面的头部<head></head>之间加上下面这句∶
<meta name=“viewport” content=“width=device-width; initial-scale=1.0”>
meta viewport这个属性是在移动设备上设置原始大小显示和是否缩放的声明。
网友评论