移动端页面适配方案

移动端web页面的开发，由于手机屏幕尺寸、分辨率不同，或者需要考虑横竖屏问题，为了使得web页面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题。经过整理，常用方案有以下几种

视口相关理解：
获取布局视口的宽度：document.documentElement.clientWidth
获取设备css像素（屏幕尺寸）：window.screen.width

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

width：控制 layout viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

方案一：百分比—固定高度，宽度自适应

这种方案是目前使用较多的方案，也是相对较简单的实现方案：

该方法使用了理想视口：

<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

垂直方向使用固定的值，水平方向使用弹性布局，元素采用定值、百分比、flex布局等。这种方案相对简单，还原度也非常低。

使用 百分比% 定义 宽度，高度 用px固定，根据可视区域实时尺寸进行调整，尽可能适应各种分辨率，通常使用max-width/min-width控制尺寸范围过大或者过小。下表是子元素不同属性设置百分比的依据

属性	设置参考
height/width	基于子元素的直接父元素，width相对于父元素的width，height相对于父元素的height
top/bottom 和left/right	相对于直接非static定位的父元素的height/width
padding/margin	不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，与父元素的height无关
border-radius	相对于自身的宽度

方案二：rem—固定布局视口，以rem作为宽度单位，根据不同屏幕动态写入font-size

实例：网易新闻

固定布局视口，设置理想视口

<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

以640px设计稿和750px的视觉稿，网易这样处理的：DOMContentLoaded后，设置rem

var width = document.documentElement.clientWidth;   // 屏幕的布局视口宽度
var rem = width / 7.5;                              // 750px设计稿与375px的屏幕都将布局视口分为7.5份，
// 如果设计稿是640px
var rem = width / 6.4;                              // 640px设计稿与320px的屏幕都将布局视口分为6.4份

这里width除以的常数值主要是为了得到100，方便根据设计稿计算元素的尺寸。这样不管是750px设计稿还是640px设计稿，1rem 等于设计稿上的100px。故px转换rem时：

rem = px / 100

在750px设计稿上：

//75px 对应 0.75rem, 距离占设计稿的10%；

//在ipone6上：
width = document.documentElement.clientWidth = 375px；
rem = 375px / 7.5 = 50px;
0.75rem = 37.5px;   //(37.5/375=10%；占屏幕10%)
                     
//在ipone5上：
width = document.documentElement.clientWidth = 320px；
rem = 320px / 7.5 = 42.667px;
0.75rem = 32px; //(32/320=10%；占屏幕10%)

故对于设计稿上任何一个尺寸换成rem后，在任何屏下对应的尺寸占屏幕宽度的百分比相同。故这种布局可以百分比还原设计图。

此方案的font-size使用了rem作为单位

js代码：

(function (doc,win) {
   
          var fn = function () {
   
              var deviceWidth =  doc.documentElement.clientWidth;