媒体查询 / 响应式

媒体查询

@media only screen and (min-width: 340px) {
body{ background: #ff0; }
}
@media only screen and (min-width: 340px) and (max-width: 640px) {
body{ background: #f00; }
}
@media only screen and (min-width: 640px) and (max-width: 740px) {
body{ background: #0f0; }
}

如何识别手机尺寸通过设置meta语句

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
device-width 设备屏幕分辨率的宽度值
initial-scale   设定页面初始缩放比例（0-10.0）
minimum-scale 设定最小缩小比例（0-10.0）
maximum-scale 设定最大放大比例（0-10.0）
user-scalable 设定用户是否可以缩放（yes/no）

响应式

em:根据父集font-size文字大小取值
rem:根据HTML根目录的font-size文字大小取值
vw:根据浏览器可视窗口宽度取值，1vw=浏览视口的宽度的1%；
vh:根据浏览器可视窗口高度取值，1vh=浏览视口高度的1%；

如何识别手机尺寸通过设置meta语句

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
device-width 设备屏幕分辨率的宽度值
initial-scale   设定页面初始缩放比例（0-10.0）
minimum-scale 设定最小缩小比例（0-10.0）
maximum-scale 设定最大放大比例（0-10.0）
user-scalable 设定用户是否可以缩放（yes/no）