vue自适应(配置postcss-px2rem)

采用插件postcss-px2rem结合动态更新根节点的font-size 的js代码共同完成,实现在不同的屏幕等比例放大或缩小页面

1. postcss-px2rem(命令行安装)

npm i postcss-px2rem --save

   
   
  • 1

2. 动态更新根节点的font-size 的js代码

在app.vue的mounted函数中添加如下代码:

mounted () {
    const computed = function () {
      // 设计稿宽度:1920
      const desW = 1920
      const devW = document.documentElement.clientWidth
      if (devW > 1280) {
        document.documentElement.style.fontSize = devW / desW * 75 + 'px'
        // 这里的75是使用postcss-px2rem插件时,配置的remUnit的参数值
      } else {
        document.documentElement.style.fontSize = 50 + 'px'
      }
    }
    computed()
    window.addEventListener('resize', computed, false)
  }
// 默认字体的大小和最小展示宽度,解决网页端在平板上的样式混乱问题
#app {
  font-size: 14Px  !important;
  min-width: 1280Px;
}

   
   

3. 配置postcss-px2rem

px2rem的配置放在vue.config.js中

css: {
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          require('postcss-px2rem')({
            // 以设计稿750为例, 750 / 10 = 75
            remUnit: 75 
          })
        ]
      }
    }
  }

   
   

举个例子:
设计稿1920px,宽度300px,样式表中定义样式为300px(第一张图),但是在浏览器中的宽度是4rem(300/75)(第二张图),在根据rem这个相对长度单位,相对于根元素(即html元素)font-size计算值的倍数,在浏览器中显示为4rem*根元素的font-size值,这就是显示的宽度

第1张图:
在这里插入图片描述
第2张图:
在这里插入图片描述

第3张图:
在这里插入图片描述
补充:
另一种lib-flexible(阿里伸缩布局方案)和 postcss-px2rem(px转rem)相结合来实现的方式

1.安装lib-flexible命令

npm install lib-flexible --save-dev

   
   
  • 1

2.修改flexible.js 代码(全局搜索refreshRem)
这是针对移动端的源码中写死了设计方案,在安装好lib-flexible和 postcss-px2rem后,修改为下面的代码就可以了。其中的if判断是根据自己需求的
如下面代码禁掉的是原有的,新加的是但当前浏览器宽小于810则固定为810px宽,这样就实现了vue pc端自适应

function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        // if (width / dpr > 540) {
        //     width = 540 * dpr;
        // }
        if(width/dpr<810){
            width = 810 * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

   
   

3.postcss-px2rem安装及配置如上

这个方法存在小问题,他修改了安装的依赖文件flexible.js中的代码,重新拉取代码时容易忘记,知道展示效果不对时才会找到文件并修改回来

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值