标签：
一、调试工具介绍（Chrome Emulation）
1.Device（设备相关）
自定义尺寸、Network（网络模拟）、UseAgent（浏览器信息）、缩放
2.Media（媒体）
3.Network（网络模拟）
4.Senors（传感器）
经纬度、陀螺仪
二、本地服务器搭建
1.搭建服务器 || HBuilder
2.同一网络下用设备连接
*关闭防火墙
三、像素比
1.点 point（抽象单位）
2.像素渲染（栅格化）
3.物理像素（调整大小）
4.dpi、ppi
5.获取像素比（window.devicePixelRatio）
四、viewport（视口）
1.width 设备宽度[pixel_value | device-width]
2.user-scalable 是否允许缩放（no || yes）
3.initial-scale 初始比例
4.minimum-scale 允许缩放的最小比例
5.maximum-scale 允许缩放的最大比例
6.target-densitydpi （已淘汰）
7.动态控制比例 1/像素比
五、前期准备
1.布局单位介绍选择
2.默认样式处理
-webkit-tap-highlight-color:transparent;
input{-webkit-appearance:none;}/*去除input默认样式*/
3.框架搭建
4.横竖屏适配
getBoundingClientRect().width
resize.orientationchange
六、媒体查询
all 所有媒体
braille 盲文触觉设备
embossed 盲文打印机
print 手持设备
projection 打印预览
screen 彩屏设备
speech ‘听觉’类似的媒体类型
tty 不适用像素的设备
tv 电视
七、媒体特征
min-width 分辨率宽度大于等于设备值得时候识别
max-width 分辨率宽度小于等于设备值的时候识别
orientation:portraint 竖屏
orientation:landscape 横屏
-webkit-min-device-pixel-radio:2 像素比
八、关键字
and 和、与（连接媒体特性）
not 排除指定媒体类型
only 指定某种特定的媒体类型（很多时候是用来对那些不支持媒体特性但却支持媒体类型的设备）
九、样式引用
外联样式表 link[media="all and (min-width:600px)"]
@import @import url(index.css)all and (min-width:600px)
十、常规尺寸
@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){//手机设备}
补充：
一、移动开发需求
1.让页面的宽度跟访问设备的宽度一致 device-width
2.不让用户进行页面缩放 user-scalable = no
3.控制像素比
（如何让1px做1px的事情？a 1:1像素还原 b 尽可能的和设备分辨率一致）
通过JS控制像素比：
<script>
//获取像素比
var pixelRatio = 1/window.devicePixelRatio;
//通过JS动态设置视口（viewport）
document.write(‘<meta name = "viewport" content = "width = device-width,initial-scale = ‘+pixelRatio+‘,minimum-scale = ‘+pixelRatio+‘"/>‘)
</script>
二、移动布局步骤
1.确定尺寸（设计稿）并且还得再符合该尺寸的模拟器下进行第一次预览
2.搭建大体框架
三、单位对比
px 绝对（固定）单位
缺点：任何情况下都是固定值，会导致布局在不同尺寸的设备下错位
% 相对单位（会有影响发生变化）相对于父级（自身）大小进行计算
缺点：能确定范围的还是比较好计算的，对于不太好确定值的地方不好使用百分比，并且会导致变形
em 相对单位（会有影响发生变化）em=当前字体大小
缺点：会根据当前容器字体大小发生变化，假如每个容器字体大小不一致，那么计算会非常麻烦
rem r=root em=字体大小font size 相对单位 只依赖HTML字体大小
四、动态设置字体大小
<script>
//条件：尺寸越大，则字体越大，尺寸越小，则字体越小
//获取html节点
var html = document.getElementByTagName(‘html‘[0]);
//获取屏幕宽度
var pageWidth = html.getBoundingClientRect().width;
//屏幕宽度/固定数值=基准值
html.style.fontsize = pageWidth/10 + ‘px‘;
</script>
移动端固定定位的方法：
html{width:100%;height:100%;overflow:hidden;}
body{width:100%;height:100%;overflow:auto;}
需要定位的元素使用position:absolute;top:0;left:0;
标签：
原文地址：http://www.cnblogs.com/jiangtengteng/p/5927175.html
