1：调试工具介绍
Device (设备相关)
自定义尺寸
Network(网络模拟)
User Agent(浏览器信息)
缩放
Media (媒体)
Network(网络模拟)
Sensors (传感器)
经纬度
陀螺仪 (α、β、γ ≈ z、x、y）
2：本地服务器搭建
3：像素比（devicePixelRatio）
点、points （抽象单位 ）
像素渲染 （栅格化）
物理像素 （调整大小）
dpi、ppi
获取像素比 （window.devicePixelRatio）
参考：
http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
4：viewport（视口）
width 设备宽度 [pixel_value | device-width]
user-scalable 是否允许缩放 （no||yes）
initial-scale 初始比例
minimum-scale 允许缩放的最小比例
maximum-scale 允许缩放的最大比例
target-densitydpi (以淘汰)
动态控制比例 1/像素比
5：前期准备
默认样式处理
-webkit-tap-highlight-color:transparent;
input {-webkit-appearance:none;/*去除input默认样式*/}
框架搭建
横竖屏适配
getBoundingClientRect().width
resize、orientationchange
6：媒体查询
all 所有媒体
braille 盲文触觉设备
embossed 盲文打印机
print 手持设备
projection 打印预览
screen 彩屏设备
speech ‘听觉’类似的媒体类型
tty 不适用像素的设备
tv 电视
7：媒体特性
min-width 分辨率宽度大于等于设置值的时候识别
max-width 分辨率宽度小于等于设置值的时候识别
orientation:portrait 竖屏
orientation:landscape 横屏
-webkit-min-device-pixel-ratio:2 像素比
8：
关键字
and 和、与 （连接媒体特性）
not 排除指定媒体类型
only 指定某种特定的媒体类型
很多时候是用来对那些不支持媒体特性但却支持媒体类型的设备
样式引用
外联样式表 link[media="all and (min-width:600px)"]
@import @import url(index.css) all and (min-width:600px)
9：常规尺寸
@media all and (min-width:1200px){
//大分辨率（PC分辨率、TV）
}
@media all and (min-width:850px) and (max-width:1199px){
//中等分辨率（PC小分辨率 || pad）
}
@media all and (min-width:700px) and (max-width:849px){
//pad设备
}
@media all and (min-width:480px) and (max-width:699px){
//高分辨率手机设备 || 低分辨率平板
}
@media all and (max-width:479px){
//手机设备
}
扫一扫手机访问
