工具使用vue

Vue中使px自动转rem配置(使用第三方包)|| 用js配置+

2022-02-26  本文已影响0人  空格x

1. 使用第三方包实现px自动转换rem

1.1 首先下载需要的npm包
npm i amfe-flexible // 用于设置 rem 基准值
npm install postcss-pxtorem -D // 是一款 postcss 插件,用于将px单位转化为 rem

需要注意的是:

1.2 对文件进行额外的配置
import 'amfe-flexible'
/**
 * PostCSS 配置文件
 */

 module.exports = {
    // 配置要使用的 PostCSS 插件
    plugins: {
        // 配置使用 autoprefixer 插件
        // 作用:生成浏览器 CSS 样式规则前缀
        // VueCLI 内部已经配置了 autoprefixer 插件
        // 所以又配置了一次,所以产生冲突了
        // 'autoprefixer': { // autoprefixer 插件的配置
        // 配置要兼容到的环境信息
        // browsers: ['Android >= 4.0', 'iOS >= 8']
        // },

        // 配置使用 postcss-pxtorem 插件
        // 作用:把 px 转为 rem
        'postcss-pxtorem': {
            // lib-flexible 的 REM 适配方案:把一行分为 10 份,每份就是十分之一
            // 所以 rootValue 应该设置为你的设计稿宽度的十分之一
            // 我们的设计稿是 750,所以应该设置为 750 / 10 = 75
            // 但是 Vant 建议设置为 37.5,为什么?因为 Vant 是基于 375 写的
            // 所以必须设置为 37.5,唯一的缺点就是使用我们设计稿的尺寸都必须 / 2
            // 有没有更好的办法?
            // 如果是 Vant 的样式,就按照 37.5 来转换
            // 如果是 我们自己 的样式,就按照 75 来转换
            // 通过查阅文档,我们发现 rootValue 支持两种类型:
            // 数字:固定的数值
            // 函数:可以动态处理返回
            // postcss-pxtorem 处理每个 CSS 文件的时候都会来调用这个函数
            // 它会把被处理的 CSS 文件相关的信息通过参数传递给该函数
            // file : vant-button.css
            // file :  login.vue
            mediaQuery: false, //媒体查询( @media screen 之类的)中不生效
            minPixelValue: 12, //px小于12的不会被转换
            // unitPrecision: 5, //保留rem小数点多少位
            // selectorBlackList: [''],  //则是一个对css选择器进行过滤的数组,比如你设置为['fs'],那例如fs-xl类名,里面有关px的样式将不被转换,这里也支持正则写法。
            rootValue({ file }) {
                return file.indexOf('vant') !== -1 ? 37.5 : 75 // 此处是以375为基准进行计算   1rem相当于37.5px
            },
            // rootValue: 37.5, // 或者直接指定所有的都为37.5 二选一

            // 配置要转换的 CSS 属性
            // * 表示所有
            propList: ['*']
        }
    }
}

2. 用js配置+vscode扩展处理适配问题

2.1 在项目内创建一个js文件里面写入如下代码
(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10 //此处修改等分份数,现在是37.5px一份(以375设计稿为标准)
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))
2.2 在main.js进行引入
import '@/utils/flexible'
2.3 使用vscode扩展辅助计算
上一篇下一篇

猜你喜欢

热点阅读