移动端自适应

常见尺寸：

1：创建rem.js:

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            if(clientWidth>=1024){
                docEl.style.fontSize = '32px';
            }else{
				// 假设iphone6为例屏幕总宽度: 375px，屏幕总高度: 667px。推荐设计稿大小x2：750*1206
                docEl.style.fontSize = 32 * (clientWidth / 750) + 'px';  //设计1rem=16px，假如为了方便换算成1rem=100px，那这个32就变成相应的比例500*0.2。和编辑器保持同步，若此处变了，编辑器最好同步变
                var a =docEl.style.fontSize = 32 * (clientWidth / 750) + 'px';
            }
        };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
// 375代表设计稿的宽度；项目的设计稿宽度是多少 这里就写多少；

2:在main.js中引入
import rem from './assets/js/rem.js'
3：在项目中适配测试，1rem=16px;和上面js文件设置的值相对应，是成功的。然后可以发现根据屏幕尺寸不一样，html根元素的font-size随之自适应。

.pcInfo{
		font-size: 16px;
	}
.pcInfo2{
		font-size: 1rem;
	}

其他方法参考：https://blog.csdn.net/qq_36229632/article/details/106887919?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2_{aggregatepage}first_rank_ecpm_v1~rank_v31_ecpm-1-106887919.pc_agg_new_rank&utm_term=vant%E8%87%AA%E9%80%82%E5%BA%94%E5%AD%97%E4%BD%93&spm=1000.2123.3001.4430