web移动端vw rem适配各种尺寸，手机基于 vw 单位的移动端适配方案

1 "head"里添加"meta"

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

2 计算 html 的"font-size"在utils里创建rem.js

export const  setFontSize = (designWith = 750) => {
    // 设计稿宽度, 750|640|520   designWith

    // 设计稿上1px对应设备上多少个单位的vw, 100vw表示设备屏幕宽度
    var vw = 100 / designWith

    // html的font-size的大小
    // 同时也是单位rem的大小
    // 为了方便后面的尺寸计算,放大100倍,即设计稿上的100px;
    var fontSize = 100 * vw

    // 设置html的font-size, 可以直接写在 css 里面
    document.getElementsByTagName("html")[0].style.fontSize = fontSize + "vw"
}

3.main.js引入执行

import {setFontSize} from './utils/rem'
// 设计稿宽度, 750|640|520
setFontSize(750)

使用

1.设计稿上元素的尺寸(px): eleWidth  

.ele {
    width: (eleWidth/100)rem;
}

2也可使用vs code的插件快速方面

搜索 px to rem & rpx (cssrem) 安装即可 把Root Font Size设置成100即可   

输入px 自动匹配对应的值