基于postcss-pxtorem的vue项目响应式布局

基于postcss-pxtorem的vue项目响应式布局

最近在开发一个门户网站，用到了媒体查询响应式布局和postcss-pxtorem，下面做个小总结，方便以后使用。

• 安装amfe-flexible和postcss-pxtorem

npm install amfe-flexible --save

npm install postcss-pxtorem --save--dev

• main.js中引入amfe-flexible

import "amfe-flexible";

• vue.config.js中添加如下配置

module.exports = {
	css: {
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer({
            overrideBrowserslist: [
              "Android >= 4.0",
              "iOS >= 8",
              "Chrome > 31",
              "ff > 31",
              "ie >= 8"
            ]
          }),
          // pc端
          pxtorem({
            // amfe-flexible适配方案 是把页面宽度分成10份，每份是十分之一
            // 所有rootValue应该设置位置设计稿宽的1/10
            // vant库设置为37.5
            rootValue: 192, 
            // 配置不要转换的样式资源
            exclude: /node_modules\/vant|mobile/i, // 排除mobile和vant库
            propList: ["*", "!border"], // 配置要转换的css属性 *表示所有
            selectorBlackList: [".van-"] // 排除移动端使用了vant库
          }),
          
          // mobile端
          pxtorem({
            rootValue: 100,
            exclude: /node_modules\/element-ui/i,
            propList: ["*", "!border"],
            minPixelValue: 1, // 设置要替换的最小像素值(1px会被转rem)。 默认 0
            selectorBlackList: [".el-"] // 排除移动端使用了element-ui库
          })
        ]
      }
    }
  },
}

• 配置完成后在App.vue中mounted添加setRem函数

mounted() {
	function setRem() {
	  // 设计稿以1920px为宽度，而我把页面宽度设计为10rem的情况下
	  let baseSize = 192 // 这个是设计稿中1rem的大小。
	  // 移动端
	  if (document.documentElement.clientWidth <= 992) {
	    // 移动端 100px = 1rem
	    baseSize = 100 // 这个是设计稿中1rem的大小。
	    // 375为设计稿页面宽度，如为750，把375改为750
	    const scale = document.documentElement.clientWidth / 375
	    // 设置页面根节点字体大小
	    document.documentElement.style.fontSize =
	      baseSize * Math.min(scale, 2) + 'px'
	  } else {
	    // pc端
	    baseSize = 192
	    const scale = document.documentElement.clientWidth / 1920
	    // 设置页面根节点字体大小
	    document.documentElement.style.fontSize =
	      baseSize * Math.min(scale, 2) + 'px'
	  }
	}
	let self = this;
	// 初始化
	setRem()
	// 窗口变化后，重置rem
	window.addEventListener('resize', function (e) {
      self.$nextTick(() => {
        setRem()
      })
    })
}

• 接下来使用媒体查询，编写css即可，这里我使用scss

// pc端
@media screen and (min-width: 992px) {
}
// 移动端
@media screen and (max-width: 992px) {
}

至此，响应式布局基本完成了。