vue使用rem适配

vue使用rem适配

近日在项目完成时需要需要做到内容跟随屏幕可视窗口大小进行适配，然后想到用rem来实现适配问题
1.首先安装一个px转rem的插件

npm install postcss-pxtorem --save

2.新建一个rem.js文件

// 设置 rem 函数
function setRem() {
    const pageWidth = window.innerWidth;
    //为了ie也能拿到可视窗口宽度
    if (typeof pageWidth != "number") {
        //标准模式
        if (document.compatMode == "CSS1Compat") {
            pageWidth = document.documentElement.clientWidth;
            //怪异模式
        } else {
            pageWidth = document.body.clientWidth;
        }
    }
    if (pageWidth <= 750) {
        const baseSize = 75
        // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
        const scale = document.documentElement.clientWidth / pageWidth
        // 设置页面根节点字体大小
        document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
    } else if (pageWidth > 750 && pageWidth <= 1200) {
        const baseSize = 85
        // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
        const scale = document.documentElement.clientWidth / pageWidth
        // 设置页面根节点字体大小
        document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
    } else {
        const baseSize = 100
        // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
        const scale = document.documentElement.clientWidth / 1920
        // 设置页面根节点字体大小
        document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
    }
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
    setRem()
}
 

3.在main.js中引入rem.js文件

import './utils/rem'

4. 修改.postcssrc.js 文件

在.postcssrc.js文件内的 plugins 添加以下配置，配后就可以在开发中直接使用 px 单位开发了

 
module.exports = {
    "plugins": {
      // 兼容浏览器，添加前缀
    autoprefixer: {
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8",
        "last 10 versions", // 所有主流浏览器最近10版本用
      ],
      grid: true,
    },
    //配置这一段
        "postcss-pxtorem": {
            rootValue: 100,
      propList: ["*"], //是一个存储哪些将被转换的属性列表，这里设置为['*']全部，假设需要仅对边框进行设置，可以写['*', '!border*']
      unitPrecision: 5, //保留rem小数点多少位
      //selectorBlackList: ['.radius'],  //则是一个对css选择器进行过滤的数组，比如你设置为['fs']，那例如fs-xl类名，里面有关px的样式将不被转换，这里也支持正则写法。
      replace: true, //这个真不知到干嘛用的。有知道的告诉我一下
      mediaQuery: false, //媒体查询( @media screen 之类的)中不生效
      minPixelValue: 12, //px小于12的不会被转换
        },
        "postcss-import": {},      //用于@import导入css文件
        "postcss-url": {},           //路径引入css文件或node_modules文件
        "postcss-aspect-ratio-mini": {},   //用来处理元素容器宽高比
        "postcss-write-svg": { utf8: false },    //用来处理移动端1px的解决方案。该插件主要使用的是border-image和background来做1px的相关处理。
        "postcss-cssnext": {},  //该插件可以让我们使用CSS未来的特性，其会对这些特性做相关的兼容性处理。
        "postcss-px-to-viewport": {    //把px单位转换为vw、vh、vmin或者vmax这样的视窗单位，也是vw适配方案的核心插件之一。
            viewportWidth: 1130,    //视窗的宽度
            viewportHeight: 1334,   //视窗的高度
            unitPrecision: 3,    //将px转化为视窗单位值的小数位数
            viewportUnit: 'vw',    //指定要转换成的视窗单位值
            selectorBlackList: ['.ignore', '.hairlines'],    //指定不转换视窗单位值得类，可以自定义，可以无限添加
            minPixelValue: 1,    //小于等于1px不转换为视窗单位
            mediaQuery: false   //允许在媒体查询中使用px
        },
        "postcss-viewport-units": {}, //给vw、vh、vmin和vmax做适配的操作,这是实现vw布局必不可少的一个插件
        "cssnano": {    //主要用来压缩和清理CSS代码。在Webpack中，cssnano和css-loader捆绑在一起，所以不需要自己加载它。
            preset: "advanced",   //重复调用
            autoprefixer: false,    //cssnext和cssnano都具有autoprefixer,事实上只需要一个，所以把默认的autoprefixer删除掉，然后把cssnano中的autoprefixer设置为false。
            "postcss-zindex": false   //只要启用了这个插件，z-index的值就会重置为1
        }
    }
}

遇到问题

如果经过上面的配置,启动项目出现以下错误

vue Syntax Error: Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.

他说你的postcss识别不了 postcss-pxtorem ,所以导致这个错误,这时候你是配置不了.postcssrc.js的,只有注释配置才会正常运行,这时候你可以就你的package.json去看一下你的依赖项

这时候你会发现你的postcss-pxtorem是6.xxx的版本,因为就是他的版本过高了,所以导致这个问题的出现

你只需要把的版本降低到5.1.1就OK了

npm i postcss-pxtorem@5.1.1 --save

然后你重新运行就解决问题