多媒体查询:取代了查找设备的类型,CSS3根据设置自适应显示。
*viewport(视窗)的宽度与高度
*设备的宽度与高度
*朝向(智能手机横屏、竖屏)
*分辨率
目前很多针对苹果手机、android手机、平板等设备都会使用到多媒体查询。
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,
user-scalable=0,width=device-width,initial-scale=1.0"/>
如果浏览器窗口小于 500px, 背景将变为浅蓝色:
@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}