【移动端】页面自适应布局—基于rem布局

　　今天来总结一下移动端学习的学习成果。

　　移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？

　　在布局的时候需要考虑，让不同大小的手机屏幕随着分辨率的变化，页面元素的尺寸和间距都相应变化，即可以实现等比例的布局。另外一个需要考虑的问题是，有些手机是 Retina 屏，其devicePixelRatio都大于1，这样其CSS像素和设备物理像素就是不一样的。

　　先解释几个概念：

　　1）设备物理像素：显示器上最小的物理显示单元。

　　2）设备独立像素：也叫密度无关像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素。

　　3）设备像素比：定义了物理像素和设备独立像素的对应关系。

　　设备像素比=物理像素/设备独立像素

　　例如：iphone6

　　设备宽高为375px × 667px –>设备独立像素

　　dpr=2 –> 物理像素：750 × 1334

参照淘宝的flexible.js进行布局。选择一种尺寸作为设计和开发基准，定义一套适配规则，自动匹配剩下的尺寸，特殊适配效果给出设计效果。具体思路：

针对不同搜集屏幕尺寸和dpr动态的改变根节点html的font-size大小。

（1）动态设置viewport的scale

var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

（2）动态计算html的font-size

document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

（3）布局的时候，各元素的css尺寸=设计稿标注尺寸/１rem

（4）font-size可能需要额外的媒介查询，并且font-size不使用rem。

收获：

1、querySelector() 方法返回匹配指定 CSS 选择器元素的第一个子元素 。

注意： querySelector() 方法只返回匹配指定选择器的第一个元素。如果要返回所有匹配元素，请使用 querySelectorAll() 方法替代。

2、设备版本 = window.navigator.appVersion

设备宽度 = document.documentElement.clientWidth

设备dpr = window.devicePixelRatio

3、不同dpr下加载不同尺寸的图片

页面代码：一个基于flexible.js的移动端自适应表单