1.Emulation
移动端调试工具
2.viewport
在需要媒体查询的页面中,一定要加入viewport
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, //是否允许缩放 initial-scale=1.0, //初始比例 minimum-scale=1.0, //最小缩放比 maximum-scale=1.0, //最大缩放比 target-densitydpi=device-dpi"> //像素/英寸
3.@media
用法:@media 设备类型 and 设备条件{css} //浏览器尺寸小于960px @media (max- 960px){ body{ background: #000; } } //浏览器尺寸等于960px @media screen and (max-device-960px){ body{ background:red; } } //浏览器尺寸大于960px @media screen and (min-960px){ body{ background:orange; } }
Media所有参数汇总:
浏览器可视宽度。
height:浏览器可视高度。
device-设备屏幕的宽度。
device-height:设备屏幕的高度。
orientation:检测设备目前处于横向还是纵向状态。
aspect-ratio:检测浏览器可视宽度和高度的比例。(例如:aspect-ratio:16/9)
device-aspect-ratio:检测设备的宽度和高度的比例。
color:检测颜色的位数。(例如:min-color:32就会检测设备是否拥有32位颜色)
color-index:检查设备颜色索引表中的颜色,他的值不能是负数。monochrome:检测单色楨缓冲区域中的每个像素的位数。(这个太高级,估计咱很少会用的到)
resolution:检测屏幕或打印机的分辨率。(例如:min-resolution:300dpi或min-resolution:118dpcm)。
grid:检测输出的设备是网格的还是位图设备。