博客

1.

写两个js文件，对应的是pc端和移动端

2.

移动端：phone.js

(function () {
    function setRootFontSize() {
        let dpr, rem, scale, rootWidth;
        let rootHtml = document.documentElement;

        dpr = window.devicePixelRatio || 1; //移动端必须设置
        //限制展现页面的最小宽度
        rootWidth = rootHtml.clientWidth < 375? 375: rootHtml.clientWidth;
        rem = rootWidth * dpr / 3.75; // 19.2 = 设计图尺寸宽1920 / 100（设计图的rem = 100）
        scale = 1 / dpr;

        // 设置viewport，进行缩放，达到高清效果 (移动端添加)
        let vp = document.querySelector('meta[name="viewport"]');
        vp.setAttribute('content', 'width=' + dpr * rootHtml.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');

        // 动态写入样式
        rootHtml.style.fontSize = `${rem}px`;
    }
    setRootFontSize();
    window.addEventListener("resize", setRootFontSize, false);
    window.addEventListener("orientationchange", setRootFontSize, false); //移动端
})();

3.

pc端：window.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>=1920){
                docEl.style.fontSize = '14px';
            }else{
                /*1920是设计稿的宽度，14是浏览器默认值14(px)*/
                docEl.style.fontSize = 14* (clientWidth / 1920) + 'px';
            }
        };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

3.

在全局路由前置守卫里，判断是手机还是电脑，然后再引入对应的js文件

//

可以添加判断条件，哪些页面需要引入，哪些页面不需要引入，在路由的meta里添加一个字段来判断

//

需要一开始就获取电脑原本默认的字体大小，万一有些页面不需要使用rem，这样就可以把根字体大小设置回去

router.beforeEach((to, from, next)=>{
    //当移动端试图访问pc端页面时
    
    if (/Android |webos| iPhone |iPod| BlackBerry | iPad/i.test(navigator.userAgent)) {
        import('@/media/phone.js')
    }
    // 当pc端页面试图访问移动端页面时
    if (!/Android | webos | iPhone | iPod | BLackBerry | iPad/i.test(navigator.userAgent)) {
        import('@/media/window.js')
    }
    next();
})

4.

将电脑改为1920*1080，然后按照设计图来写，设计图上的多少px除以14得到多少rem，切换移动端发现照样可以