移动端Web页面适配方案（整理版）

主要分为：【百分比|rem|vw/vh|响应式设计】

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

早期网页设计采用静态布局，通过<meta>标签中的applicable-device应用设备标识识别移动设备，即<meta name = 'applicable-device' content = 'mobile'>，在<meta>标签中的viewport标签中设置width，通过js动态修改标签的initial-scale使得页面等比缩放，刚好占满整个屏幕。一些文章中有提到静态布局中页面各个元素采用px为单位，这种方案实现简单，不存在兼容性问题，但用户体验很不友好。

后面出现流式布局，使用百分比%定义宽度，高度使用px固定，根据可视区域大小实时进行尺寸调整，通常使用max-width/min-width控制尺寸范围过大或者过小。这种方案实现比较简单，但在大屏手机或横竖屏切换场景下可能会导致页面元素被拉伸变形，字体大小无法随屏幕大小发生变化

顺应不同页面字体大小展现问题，出现了弹性布局。这种布局方案下，包裹文字的元素的尺寸采用em/rem为单位，页面主要划分区域的尺寸依据情况使用px、百分数或者em/rem。如一些高校的网站 jlu，页面的主要划分区域使用px和百分比，包裹文字的元素和文字采用em

上面的这几种方案下，页面元素的大小按照屏幕分辨率进行适配调整，但是整体布局不变，对于响应式web设计，网页布局会随着访问它的视口及设备的不同呈现不同的样式，在实现上可能会以上多种方案的结合，同时搭配 媒体查询 技术使用，使得一个页面在多个终端 (PC, mobile, pad) 呈现满意效果，如 mashable 。

基本概念

像素 px (pixel)

像素，是屏幕上显示数据的最基本的点，表示相对大小。不同分辨率下相同长度的px元素显示会不一样，是因为像素点的个数相同情况下，不同分辨率下每个像素点对应的像素宽度不同。比如同样是14px大小的字，在1366×768显示屏下会显示的小，在1024×768显示屏下会相对大。也称为 物理像素（设备像素)，是分辨率的尺寸单位。

pt (point)
印刷行业常用单位，能够使用测量设备测得的长度，等于1/72英寸。

css像素
在不同屏幕上，css``像素呈现的物理尺寸一致，但css像素对应的物理像素具数不同。标准的显示密度下，1个css像素对应一个物理像素，缩放时，1个css```像素对应的物理像素会减增。是一种设备独立像素(device independent pixels: DIPs)

PPI (pixel per inch)
像素密度，每英寸所拥有的像素数。值越高，显示画面细节越丰富。计算公式为：
其中W和 H 是分辨率的宽高，S 是屏幕尺寸。

DPI (dot per inch)
打印设备每英寸印刷出来的点有多少个，值越高，图片越细腻。

DPR (devicePixelRatio)
设备物理像素和设备独立像素比，即

是指在理想布局宽度，使用多少个物理像素来渲染一个css像素。js中通过window.devicePixelRatio获取，css中通过-webkit-device-pixel-ratio,-webkit-min-device-pixel-ratio,-webkit-max-device-pixel-ratio进行媒体查询。

视口

标签中定义了一些元数据信息，通过设置，提供有关**视口初始大小** 的信息，供**移动设备** 使用。属性值为

属性	属性值
width	数值 / device-width
height	数值 / device-height
initial-scale	0.0 ~ 10.0
maximum-scale	0.0 ~ 10.0
minimum-scale	0.0 ~ 10.0
user-scalable	布尔值

描述
视口宽度
视口高度
设备宽度与视口大小之间的缩放比率
缩放最大值
缩放最小值
默认yes, 为 no时用户不能缩放网页

移动端涉及布局视口（Layout Viewport）、视觉视口（Visual ViewPort）和理想视口（Ideal ViewPort）

。布局视口是指用视口元标签（viewport meta）来进行布局视口设置，css布局是相对于布局视口计算
…
。视觉视口是指用户当前看到的区域
…
。理想视口是屏幕分辨率的值，通过设置 <meta name = "viewport" content = "width = device-width， initial-scale = 1.0">实现

手机屏幕特性

与移动端web页面适配有关的手机屏幕特性包括

像素分辨率

硬件所支持的，屏幕每行的像素*每列的像素点数，单位是px

逻辑分辨率

设备独立的，软件可以达到的，个人理解是使得软件/页面在不同屏幕上显示出来的效果一致

倍率

像素分辨率÷逻辑分辨率等于倍率，如@3x表示分辨率的3倍。一个已知物理像素大小的元素，如果在普通屏中其设备像素等于css像素，但在一些高清屏中，如 Retina 显示屏，一个css像素对应2或3个设备像素，这时显示出来的元素会变小。为了让元素如期待显示，需要传入原始设计稿尺寸×倍率的设计稿，根据 DPR 的定义，这样加载后能够达到同样的效果。

尺寸

手机屏幕对角线长度换算成英寸的大小

适配方案

百分比方案

原理

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

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

优势

原理简单，不存在兼容性问题

不足

。如果屏幕尺度跨度太大，相对设计稿过大或者过小的屏幕不能正常显示，在大屏手机或横竖屏切换场景下可能会导致页面元素被拉伸变形，字体大小无法随屏幕大小发生变化。
…
。设置盒模型的不同属性时，其百分比设置的参考元素不唯一，容易使布局问题变得复杂

rem方案

原理

rem是相对长度单位，rem方案中的样式设计为相对于根元素font-size计算值的倍数。根据 屏幕宽度 设置html标签的font-size，在布局时使用 rem 单位布局，达到自适应的目的，是 弹性布局 的一种实现方式。

实现过程： 首先获取文档根元素和设备dpr，设置 rem，在html文档加载和解析完成后调整body字体大小； 在页面缩放 / 回退 / 前进的时候， 获取元素的内部宽度 (不包括垂直滚动条，边框和外边距)，重新调整 rem大小。

实现方法：用 css 处理器或 npm 包将页面 css 样式中的px自动转换成 rem。在整个 flexible 适配方案中，文本使用px作为单位，使用[data-dpr]属性来区分不同dpr下的文本字号。由于手机浏览器对字体显示最小是8px，因此对于小尺寸文字需要采用px为单位，防止通过 rem 转化后出现显示问题。手机淘宝 中的字体使用px为单位，腾讯新闻中的字体使用rem为单位。

贴上 源码 分析

(function(win, lib) {
   
    var doc = win.document; //当前文档对象
    var docEl = doc.documentElement; //文档对象根元素的只读属性
    var metaEl = doc.querySelector('meta[name="viewport"]');
    var flexibleEl = doc.querySelector('meta[name="flexible"]');
    var dpr = 0;
    var scale = 0;
    var tid;
    var flexible = lib.flexible ||