移动端rem适配布局

移动端rem适配布局：Vue+amfe-flexible+postcss-pxtorem

rem 是一个相对单位，基准是相对于html元素的字体大小（浏览器默认字体大小是16px)。如：根元素(html)设置font-size: 12px; 非根元素设置width: 2rem; 则换成px表示就是24px。 amfe-flexible：原理是把当前设备宽度划分为10等份，动态设置html元素的字体大小为一份。如：当前屏幕宽度为360px，html元素的字体大小为36px。 postcss-pxtorem：不同设备下，元素占比是一定的，即rem的值不变。此工具自动将px转成rem。

安装插件

// 安装postcss-pxtorem插件
npm install postcss-pxtorem --save-dev
// 安装amfe-flexible插件
npm install amfe-flexible --save

在main.js引入插件

import 'amfe-flexible'

配置postcss.config.js文件

module.exports = {
    "plugins": {
      "postcss-pxtorem": {
        rootValue: 75, // Vant 官方根字体大小是 37.5(根据使用的ui组件？定义根元素大小？ 1rem就很大了
        propList: ['*'],
        selectorBlackList: ['.norem'] // 过滤掉.norem-开头的class，不进行rem转换
      }
    }
}

在vue.config.js中配置postcss-pxtorem插件

module.exports = {
  lintOnSave: false,
    css: {
      loaderOptions: {
        postcss: {
          plugins: [
            require('postcss-pxtorem')({ // 把px单位换算成rem单位
              rootValue: 75, // 设计稿宽度750。vant官方使用的是37.5
              selectorBlackList: ['vant', 'mu'], // 忽略转换正则匹配项
              propList: ['*']
            })
          ]
        }
      }
    }
}

在vite.config.ts中配置postcss-pxtorem插件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pxtorem from 'postcss-pxtorem';

export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [
        pxtorem({
          rootValue: 75, // 这里写设计稿的宽度/10即可，例如设计稿宽度是750px就写75
          // vant默认是37.5，如果是使用了vant的话可以像下面这样写
          // rootValue(res) {
          //   return res.file.indexOf("vant") !== -1 ? 37.5 : 75;
          // },
          propList: ['*'], // 需要转换的属性，默认转换所有属性
          selectorBlackList: [], // CSS选择器黑名单，防止部分选择器被转换
          exclude: /\/node_modules\//i, // 忽略包文件转换rem
        })
      ]
    }
  }
})

设置样式测试

<template>
    <div class="app app-all1">750px</div>
    <div class="app app-all21">100%</div>
    <div class="app app-all2">375px</div>
    <div class="app app-all22">50%</div>
    <div class="app app-all3">250px</div>
    <div class="app app-all23">33.33%</div>
    <div class="app app-all4">187.5px</div>
    <div class="app app-all24">25%</div>
</template>    
<style scoped>
.app{
  margin: 10px 0;
  font-size: 20px;
  color: red;
  height: 40px;
  line-height: 40px;
}
.app-all1 {
  width: 750px;
  background-color: aqua;
}
.app-all2 {
  width: 375px;
  background-color: aqua;
}
.app-all3 {
  width: 250px;
  background-color: aqua;
}
.app-all4 {
  width: 187.5px;
  background-color: aqua;
}
.app-all21 {
  width: 100%;
  background-color:bisque;
}
.app-all22 {
  width: 50%;
  background-color: bisque;
}
.app-all23 {
  width: 33.33%;
  background-color: bisque;
}
.app-all24 {
  width: 25%;
  background-color: bisque;
}
</style>

源码下载:https://gitee.com/leolee18/vue3-project/tree/mobile/

系列文档

vue3 两种创建方式详解(cli和vite)
vue.config.js/vite.config…
vue3 自动引入自定义组件
vueX vue3自动引入匹配的modules
vue3 自定义指令控制按钮权限的操作
vuex与axios网络请求解耦
移动端rem适配布局