前端移动端适配（rem,vw）

提示：移动端rem适配的两种方案，vw适配

一、rem方案一（淘宝，京东的移动端方案)

1.开启理想视口

<meta name="viewport" content="width=device-width, initial-scale=1/>

2.计算根节点字体
公式 根节点字体 = （视口宽度*100）/设计稿宽度
样式尺寸 = 设计值/100

function init(){
 const depWidth = document.documentElementWidth.clientWidth;//获取视口宽度
const rootFontSize = (depWidth*100)/375;
document.documentElement.style.fontSize = rootFontSize +'px';
 }
window.addEventListener('resize',init)

二、rem方案二（搜狐，唯品会的移动端方案)

1.开启理想视口

<meta name="viewport" content="width=device-width, initial-scale=1/>

2.计算根节点字体
公式 根节点字体 = 视口宽度/10
样式尺寸 = 设计值/（设计稿宽度/10）

function init(){
 const depWidth = document.documentElementWidth.clientWidth;//获取视口宽度
const rootFontSize = depWidth/10;
document.documentElement.style.fontSize = rootFontSize +'px';
 }
window.addEventListener('resize',init)

三、vw适配

样式尺寸 = （设计稿的宽度/视口宽度）*100