美文网首页
vue项目的pc适配笔记

vue项目的pc适配笔记

作者: Yl奋斗的小白 | 来源:发表于2020-11-03 17:06 被阅读0次

    创建js文件

    export const resetPc = () => {
        var wH = window.innerHeight; // 当前窗口的高度
        var wW = window.innerWidth; // 当前窗口的宽度
        var whdef = 100 / 1920; // 表示1920的设计图,使用100PX的默认值
        if (wW > 1400) {
            var rem = wW * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
            var html = document.documentElement;
            console.log(rem);
            html.style.fontSize = rem + "px"; //适用于PC网站
        } else {
            var rem = 1400 * whdef;
            var html = document.documentElement;
            html.style.fontSize = rem + "px";
        }
    }
    

    在app.vue中引入并在created生命周期里使用,100px=1rem

    import { resetPc } from "./utils/resetPc";
    
    
    created() {
        // console.log('reset')
        resetPc();
        window.addEventListener("resize", function() {
          resetPc();
        });
      },
    

    相关文章

      网友评论

          本文标题:vue项目的pc适配笔记

          本文链接:https://www.haomeiwen.com/subject/nihivktx.html