vue自适应布局3种方法:
1.传统布局 :
写个js全局引入页面即可

 //方式一
    const deviceWidth = document.documentElement.clientWidth || document.body.clientWidth;
    document.querySelector('html').style.fontSize = deviceWidth / 7.5 + 'px';
    
//方式二
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + "px";
    window.addEventListener(
      "resize",
      function() {
        document.documentElement.style.fontSize =
          document.documentElement.clientWidth / 7.5 + "px";
      },
      false
    );
//方式一和方式二 效果一样

2.lib-flexible+postcss-px2rem-exclude
淘宝也是采用这用自适应

lib-flexible:
会自动在html的head中添加一个meta name="viewport"的标签,同时会自动设置html的font-size为屏幕宽度除以10,也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px,此时1rem应该等于75px。假如量的某个元素的宽度是150px,那么在css里面定义这个元素的宽度就是 width: 2rem,那么这就有点麻烦了,我他么还要自己计算,不要慌,看下面:

postcss-px2rem-exclude:
postcss-px2rem-exclude 这个插件就是将px单位转换成rem,方便计算,假如有一设计稿为750,那么1rem 就等于75px;此时设计稿是多少px ,直接用多少px 就好了

npm安装

npm install lib-flexible --save
npm install postcss-px2rem-exclude --save-dev

复制代码
在main.js中引入lib-flexible
import "lib-flexible/flexible.js";
vue-cli3配置方式:在根路径下新增postcss.config.js文件

```javascript
module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px2rem-exclude": {
      remUnit: 75,
    }
  }
}

注意:
如果vant项目中这么使用,会改变vant 样式哦,为防止,有两种解决方式,一要么事改设计稿大小为375,因为vant是参考这个的,这显然不是很友好,
可以在

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px2rem-exclude": {
      remUnit: 75,
      exclude: /node_modules/i  //完美解决第三方ui库样式变小问题
      "selectorBlackList":["van-"] //排除vant框架相关组件 或者某样式不受rem的影响 }) ] }
    }
  }
}
Logo

前往低代码交流专区

更多推荐