前端 - 移动端适配

参考博客：移动前端自适应适配布局解决方案

1.flex

使用flex弹性布局，元素宽度自适应，高度固定为某个px值。

2.固定viewport + rem

这种适配方式是以html的font-size值为基础，所有元素的像素大小都使用rem表示（除了font-size以外）。

固定视口，缩放值为1.0

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

计算基础font-size值

font-size值的计算与设计稿宽度、设备横向逻辑像素有关

font-size = 设备横向逻辑像素 / (设计稿宽度 / 100)

分析：通常公司UI设计师会以iphone某个型号的尺寸进行页面设计，如果以iphone6的尺寸进行设计，那前端拿到的设计稿的宽度就是750px；如果以iphone5的尺寸进行设计，那设计稿的宽度就是640px

假设现在设计稿以iphone6尺寸设计（750px），设计稿上的banner宽度为600px，这时候不同尺寸的手机屏幕上如何准确的表示这个banner的宽度？手机的屏幕尺寸可能有很多种，如iphone6横向逻辑像素为375px，iphone5横向逻辑像素为320px

banner在iphone6上的宽度计算

600 / 750 = x / 375

换算

x = (375 * 600) / 750

等价于

x = (375 / 750) * 600 

375 / 750就是我们要计算的html font-size 基础值（1rem），为了方便样式代码的编写，可以将750除以100，在编写样式时同样除以100（如设计图600px，代码中只需要写成6rem）

注意：基础值并不都是375 / 750，375是设备横向逻辑像素，可以通过js获取。

document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
window.onresize = function () {
  document.documentElement.style.fontSize = document.documentElement.clientWidth / 3.75 + 'px';
}

banner的样式.

.banner {
  width: 6rem;
}

3.动态viewport + rem（淘宝方案）

动态viewport指的是，viewport的缩放数值是通过js计算之后添加的。

哎不是很好理解觉得好麻烦，不如方法2，直接走流程

1.设置viewport

设备横向逻辑像素 = 设备横向物理像素 / (dpr * scale)

当scale等于1 / dpr时（scale等于0.5），iphone6的横向逻辑像素等于750px

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

2.设置font-size

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

3.将设计稿上的标注转化为设备上的尺寸

​设备元素尺寸 = 设计稿元素尺寸 / (设计稿横向逻辑像素 / 10)

以iPhone6为例，动态设置viewport，设备横向逻辑像素为750px，字体设置为75px。当设计稿为640px，设计稿中的banner宽度为200px，此时展示在手机设备上的宽度如下所示

200 / 640 = x / 750

换算

x = (200 * 750) / 640

等价于

x = (200 / 640) * 750 = (200 / 64) * 75

75为手机设置的html根元素font-size，banner = (200 / 64)rem

3.vw vh

vw：1vw等于视口宽度（逻辑像素）的1%

vh：1vh等于视口高度（逻辑像素）的1%

vw vh与百分比的区别

vw vh相对于视口的高度和宽度；百分比相对于包含它的最近的父元素的高度和宽度（width: 50%;）

例如iphone6，视口逻辑像素为 375px x 667px

1vw = 375px/100 =37.5px

1 vh = 667px/100 = 66.7px，。