移动端适配方案

REM适配方案

REM定义

rem 的官方定义『The font size of the root element.』，即以根节点的字体大小作为基准值进行长度计算。一般网页中的各节点为HTML元素，所以采用的方式也就是设置 HTML 的 font-size 来做屏幕的适配。
假设HTML的font-size 为 16px，则 1rem = 16px

rem适配

举个实际的例子。设计师交付的设计稿宽度是750px，设计稿上一个div的标注尺寸是375px（宽度是设计稿宽度的一半）。我们可以
为什么设置font-size为 100px？

设置HTML的font-size为 100px 这样 设计稿的div宽度就可以写为3.75rem （3.75rem * 100px = 375px）

因此rem的公式可以设置为 HTML的font-size = 100 * 屏幕的宽度/设计稿的宽度

fontSize = window.innerWidth(屏幕宽度) / 750 * 100

假设设计稿为750，iPhone 6 的手机宽度 为 375(逻辑像素) 则
font-size = 100 * 375 / 750 = 50px
则 手机上的div的宽度就是 3.75rem * 50 = 187.5px, 整好是手机屏幕宽度的一半

假设用户在逻辑像素宽度是428px的设备上打开页面，则html的font-size是100* 428/750 = 57.07px，div的宽度是3.75rem ，即214px 正好是屏幕宽度的一半。

625%的由来？
由于浏览器默认的字体大小为16px，所以换成百分比的话就是

fontSize = (100px / 16px)* 100 = 625\%

fontSize = ((innerWidth/designWidth * rem2px) / 16px) * 100 = 625\%

总结

1. 设置html的 font-size 为 100 * 屏幕宽度/设计稿宽度
2. 写CSS样式时，div的宽度为设计稿上元素的宽度/100 （rem），（即：设计稿标注的大小），边框的大小用px表示 1px

适配代码：

方案一

const designWidth = 750  //如果是尺寸的设计稿在这里修改
const rem2px = 100
const setView = () => {
  //设置html标签的fontSize
  document.documentElement.style.fontSize =(window.innerWidth / designWidth )* rem2px + 'px'
}
window.onorientationchange = setView
setView()

方案二

var designWidth = 750, rem2px = 100;
document.documentElement.style.fontSize = 
  ((((window.innerWidth / designWidth) * rem2px) / 16) * 100) + '%';

方案三

@media screen and (min-width: 375px) {html{font-size:50px;}}
@media screen and (min-width: 750px) {html{font-size:100px;}}

方案四

@media screen and (min-width: 375px) {html{font-size:312.5%;}}
@media screen and (min-width: 750px) {html{font-size:625%;}}

vw方案适配方案

定义

vw是基于Viewport视窗的长度单位，这里的视窗（Viewport）指的就是浏览器可视化的区域，而这个可视区域是window.innerWidth/window.innerHeight的大小。用下图简单的来示意一下：

原理

vw是相对单位，1vw表示屏幕宽度的1%。基于此，我们可以把所有需要适配屏幕大小等比缩放的元素都使用vw做为单位。不需要缩放的元素使用px做单位。

举个例子。设计师交付的设计稿宽度是750px，那么 100vw = 750px
如果 设计稿上按的宽度为 75px，则代码中为10vw,（75/750 * 100）vw

对于任何需要等比缩放的元素，在写CSS设置样式时直接换算成vw即可，尺寸 = 100vw*设计稿标注大小/设计稿宽度

适配代码

我们可以使用PostCSS的插件 postcss-px-to-viewport,直接在代码中写px，然后会自动转为vm
假如设计稿的宽度为750px，则进行如下配置

"postcss-px-to-viewport": {
    viewportWidth: 750,
    viewportHeight: 1334,
    unitPrecision: 5,
    viewportUnit: 'vw',
    selectorBlackList: [],
    minPixelValue: 1,
    mediaQuery: false
}

postcss-px-to-viewport 配置连接

viewport缩放方案

viewport原理
移动端H5适配