移动的自适应方法

解决方法1

　　动态修改视口标签的缩放值　

// 最简单最粗暴的解决方法

<meta name="viewport" id="mt" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script>
    (function(){
    let meta = document.getElementById('mt');
    let width = window.innerWidth;
    mt['content']=`width=device-width, user-scalable=no, initial-    scale=${width/750}     maximum-scale=1.0`;
    })();
</script>

解决办法2

使用vw + rem

vw是HTML中的一个百分比单位, 把一个页面分为100份，每一份为1vw
也就是说 100vw = 宽度100%

　　现在有一个设计稿宽度为750时
　　应该选用的参考宽度为375px

　　那么 100vw = 375px
　　　　　　？ = 100px;
　　=> 10000/375vw = 26.67vw;

　　由上可得 当给跟字体大小设置为 26.67vw时
　　页面根字体大小为100px

　　如果现在设计稿中有一个盒子高度为100px;
　　因为设计稿的宽度为 750 而 页面宽度为 375
　　那么在实际显示的高度应该为 50
　　又因为根字体大小为100px
　　那么我们可以设置 为0.5rem

　　如果设计稿尺寸为 640px;
　　那么 100vw = 320px;
　　？ = 100px
　　=> 10000/320vw = 31.25;

解决方案三

　　js动态修改根字体大小+rem

1. 在页面中引入rem.js文件
2. 下载rem插件为了方便计算

+ 当视口标签为自己设置的缩放值
a. 需要给设置rem.js中的 18行代码 b / i > 750 && (b = 750 * i);
把其中的数字修改为对应的页面宽度
b. rem插件需要设 "px_to_rem": 75 也就是页面宽度的十分之一

c. 当在设计稿中量取的值为多少就直接设置为多少像素时rem插件会自动会有一个选项为转换为rem单位之后的值

+ 当页面中没有设置视口缩放标签的值
a. 那么rem.js会自动生成一个视口标签，该视口标签会进行修改页面的缩放比列
b. 例如：
<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

c. rem插件需要设 "px_to_rem": 75 也就是页面宽度的十分之一
d. 当在设计稿中量取的值为多少就直接设置为多少像素时rem插件会自动会有一个选项为转换为rem单位之后的值

3. 计算原理
通过设置 根字体元素的大小

rem.js下载