zoukankan      html  css  js  c++  java
  • vuecli3 自适应pc端界面

    // 1.安装依赖
    npm install lib-flexible --save-dev
    npm i postcss-px2rem --save
    
    // 2.在main.js内引用
    import 'lib-flexible'
    
    // 3.在vue.config.js内配置
    // 其中的remUnit是根据设计稿自定义,设计稿尺寸/10
    module.exports = {
      lintOnSave: false,
     
      configureWebpack: {},
     
      chainWebpack: () => {},
     
      css: {
        loaderOptions: {
          css: {},
          postcss: {
            plugins: [
              require("postcss-px2rem")({
                remUnit: 136.6
              })
            ]
          }
        }
      }
    };
    
    4.修改flexible.js配置
    node_moudles/lib-flexible/flexible.js
    function refreshRem(){
          var width = docEl.getBoundingClientRect().width;
          if (width / dpr > 540) {
              //  width = 540 * dpr; // 540修改为width
              width = width * dpr;
          }
          var rem = width / 10;
          docEl.style.fontSize = rem + 'px';
          flexible.rem = win.rem = rem;
      }
  • 相关阅读:
    MySQL第七课
    MySQL第六课
    mysql第五课
    MySQL第四课
    MySQL第三课
    MYSQL第一课
    MYSQL第二课
    char、vchar、nvarchar 的区别
    SSRS Reporting Service安装与部署
    存储过程用法
  • 原文地址:https://www.cnblogs.com/zhangrenjie/p/14054889.html
Copyright © 2011-2022 走看看