vue利用postcss-px2rem、rem做PC端适配

最新推荐文章于 2024-09-11 08:41:41 发布

疯狂的小土蘑

最新推荐文章于 2024-09-11 08:41:41 发布

阅读量1.6k

点赞数

分类专栏： vue 文章标签： vue.js postcss javascript

本文链接：https://blog.csdn.net/jijunqing321/article/details/122452125

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

好久都没做过有UI工程师的前端了，猛然间让UI工程师给鄙视说页面有等比例还原，让我瞬间很尴尬，所以对vue-cli进行了一些修改，然后根据原型图把页面还原。
首先，在vue.config.js中引入postcss-px2rem插件；

 css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    loaderOptions: {
      scss: {
        additionalData: `@import "~@/assets/css/base.scss";` // 这儿的键名改了
      },
      postcss: {
        plugins: [
          require('postcss-px2rem')({
            remUnit: 100
          })
        ]
      }
    }
  },

然后，在main.js中引入rem.js

// PC端适配
import '@/utils/rem'

rem.js

(function(doc, win) {
  var docEl = doc.documentElement
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
  var recalc = function() {
    var clientWidth = docEl.clientWidth

    if (!clientWidth) return

    var html = document.getElementsByTagName('html')[0]
    var oWidth = document.body.clientWidth || document.documentElement.clientWidth
    // 根据设计图等比还原，原型图px就是要写的px
    html.style.fontSize = oWidth / 1920 * 100 + 'px'
  }

  if (!doc.addEventListener) return

  win.addEventListener(resizeEvt, recalc, false) 

  doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)

postcss-px2rem的remUnit设置为100，表明100px=1rem；
rem.js主要功能是计算根节点fontSize，根据原型图计算时，需要更换原型大小，需注意；
oWidth / 1920 * 100 + 'px’中×100主要是根据remUnit来的，主要是比较好计算，比如44px会换算成0.44rem，而rem再根据根元素fontSize大小转换px大小，最终实现响应式变化。

结束战斗！