1. viewviewport 缩放适配
(()=> {
let viewprot = document.querySelector('#viewport');
// 获取设备宽度
let curWidth = document.documentElement.clientWidth;
// 计算缩放的尺寸 基于iPhone678设计稿
let target = 375;
let scale = curWidth / target;
viewprot.content = `initial-scale=${scale},minimum-scalc=${scale}, maximum-scale=${scale},user-scalable=no`;
})()
2. rem适配
- 原理：就是把所有的设备分成相同的若干份，再计算元素宽度所占的份数。
- 举个例子，iPhone5和iPhone6对应的设备宽度分别为320px和375px，现在我们将其分为100列，那么对应每一列为3.2px和3.75px。看见没，不同的设备宽度，对应的每一列的宽度就不一样。之后我们再设置元素的宽度时，以列为媒介即可。
- 比如同样一个div，我们设置它的宽度为10列，那么iPhone5中div的宽度那就是32px，而在iPhone6中该div的宽度就是37.5px。你看这种方式是不是就实现了不同设备宽度的设备中，一个元素的大小可以等比例的缩放。
((doc, win, designWidth)=> {
let html = doc.documentElement; // 获取 html 根元素，一会要设置根元素字体的大小
const refreshRem = ()=> {
let clientWidth = html.clientWidth; // 获取 css 像素（设备的宽度）
if(clientWidth > designWidth) {
// 如果设备宽度都大于设计稿了，那么测量出来是多少就是多少
html.style.fontSize = '100px';
}else {
// 计算出比例
// 拿 iPhone6 为例，375/750=0.5
// 相当于每一列的宽度为 0.5px，分成了 750 列
// 但是浏览器是不允许这么小的字体大小的，因此乘上一个 100
// 变成每一列的宽度为 50px
// 之后在将设计稿尺寸转换为列数时，也不需要繁杂的计算
// 假设设计稿量出来为 375px => 187.5(CSS像素) => 187.5/50(每一列宽度) = 3.75(所占列数)
html.style.fontSize = 100 * (clientWidth / designWidth) + 'px';
}
}
doc.addEventListener('DOMContentLoaded', refreshRem)
})(document, window, 750) // 750 是设计稿起稿的宽度，不同的起稿设置不同的参数
