参数
width浏览器可视宽度
height浏览器可视高度
device-width设备屏幕宽度
device-height设备屏幕高度
注：以上可添加前缀max-和min-
orientation检测设备处于横向或纵向，可能值：portrait| landscape
aspect-ratio检测浏览器可视宽高比
device-aspect-ratio检测设备宽高比
grid检测输出设备是网格或位图设备，可能值：1 | 0
关键字
and 与
not 非
, 或
only 用来排除不支持媒体查询的浏览器，不会读取样式
设备名称
all 所有设备，默认
screen 显示器
speech 阅读器
print 打印机
准备工作
1、meta标签：<meta name="viewport" content="width=device-width,initial-scale=1.0" />
2、渲染引擎：<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1" />
3、加载脚本：<!--[if lt IE 9]>html5shiv.js respond.js<![endif]-->
css2媒体查询
<link rel="stylesheet" type="text/css" href="layout.css" media="screen and (max-width: 960px)" /> <style type="text/css" media="screen and (max-width: 960px)"></style>
css3媒体查询
@media screen and (min-width:960px) and (max-width:1200px) {
body{
background: yellow;
}
}
方案
老智能机：320px-280px
智能手机：>=480px
平板电脑：>=768px
中等屏幕（桌面显示器）：>=992px
大屏幕（大桌面显示屏）：>=1200px
/*设备屏幕大于1200px，PC */
@media screen and (min-width: 1200px) {}
/*设备屏幕大于992px，小于1199px，低分辨率PC，lg- */
@mediascreen and (min-width: 992px) and (max-width: 1199px) {}
/*设备屏幕大于768px，小于991px，ipad，md- */
@media screen and (min-width: 768px) and (max-width: 991px) {}
/*设备屏幕大于480px，小于767px，mobile，sm- */
@media screen and (min-width: 480px) and (max-width: 767px) {}
/*设备屏幕小于479px，低分辨率mobile，xs- */
@media screen and (max-width: 479px) {}
