Web移动适配笔记（ing）
1.rem适配法 - 文字流式，控件弹性，图片缩放
》物理像素(physical pixel)：设备上每一个用于显示的像素单元，固定不变，以'pt'为单位
》设备独立像素(density-independent pixel)：虚拟像素，比如CSS像素，由其他设备转化为物理像素，单位为'dp'，此时，当一个元素设置为'width：200px'时，元素跨越200个CSS像素，而钙元素在物理设备上的显示还取决于另外两个参数“页面缩放”“屏幕dpr”，
》设备像素比(device pixel ratio)：由于前两者不同，而产生的映射关系，对于普通屏幕，css与设备物理像素之间的映射关系为1:1，非常一致，而在高分屏下需要将不画布大小对应提升，防止位图像素点不够
js: window.devicePixelRatio
css: -webkit-(min/max)-device-pixel-ratio
1.1媒体查询设断点
html{font-size:10px}
@media screen and (min-width:XXXpx) and (max-width:XXXpx){html{font-size:11px}}
...... //设置突变点
@media screen and (min-width:XXXpx){html{font-size:25px}}
1.符合响应式要求，但是rem在不同分辨率下映射的实际像素不同，无法保证在所有平台的统一显示，且断点设置无法保证高精度
2.1.apple官网将宽度750px一下设备默认为手机设备，此为手机与pc&平板的断点
2.2.apple官网针对dpr=1，dpr=2/3，设置两套图片，同时针对pc下不同分辨率也设置了两组图片，手机端一图
2.3.apple官网大量采用ul/li布局，虽然还不知道用意何在，静静观望-.-
2.4.apple用了relative保证文字在图片中的位置，在断点之间修改padding
3.1.huawei官网采用图片缩放，设置断点pe和pc两者，也为750px，由此目前750px应该是最高效检测平台的方法了吧~
3.2.huawei在手机端将图中文字分离到图片下方，但是在pc访问1000px以下，会出现文字错位现象
4.1.WOW官网，直接引入<video>元素，在963px之后，视频改为背景图，琢磨着是为了pe用户着想
1.2利用js预先计算页面font-size
<meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1">
document.documentElement.style.fontsize = document.documentElement.clientWidth / 6.4 +'px';
特点是font-size会直接写到html的style内,要如此设置，需要确定参照的值，用此参照值 * rem，最终得到元素的大小，例如：取参照比例为100，那么，设计稿中500px的元素即为5rem，而此处的6.4也为iphone分辨率 / 100。
同时这只scale=1保证了网页在页面内的显示宽度始终等于设备逻辑像素大小，即设备逻辑像素大小，其中device-width=设备物理分辨率 / (devicePixelRatio * scale)，在scale=1情况下相等
1.3针对高分屏的js预计算优化，设置viewport缩放
var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + 'minimum-scale=' + scale + ', user-scalable=no');
//动态计算scale
document.documentElement.style.fontsize = document.documentElement.clientWidth / 10 +'px';
例如在retina下设置border：1px，但实际是需要1宽度的物理像素，在css中可以认为是0.5px，因此设置视口scale，将1px缩小为0.5px，达到效果
1.4视觉设计流程
1.选取基准手机，现在多为iphone6的 375 * 667
2.针对高分屏（dpr），输出相应的文件
2.栅格布局
看来还是分别开发pc页面和移动端页面比较合理~响应式设计只是网页设计的折衷方案！
推荐使用场景：图文混排，板块很多，栅格化让杂乱无章的内容有条理，设计师与前段更好对接
缺点：限制设计师发挥，采用960px宽度，最大限度支持所有浏览器，但是采用宽度自适应能使得网页容纳更多信息，比如Amazon
参考：http://blog.csdn.net/azureternite/article/details/52528380
以及这篇文章中的参考，与其参考的参考
