rem移动端响应式布局实践方案

1.什么rem

相对于浏览器的根元素html的font-size，1rem等于根元素html的font-size。

2.响应式实现原理

rem单位是相对于根元素html的font-size来决定大小的，根元素的font-size相当于提供了一个基准，当页面的尺寸发生变化时，只需要改变根元素的font-size的值，那么以rem为单位的元素的相关属性也会发生相应的变化。


function refreshRem() {
	const docEl = doc.documentElement;
	const width = docEl.getBoundingClientRect().width;
	const rem = width / 10;
	docEl.style.fontSize = rem + 'px';
	flexible.rem = win.rem = rem;
}
win.addEventListener('resize', refreshRem);

将视图容器分为10份，根元素的font-size为十分之一的宽度，子元素的相关属性根据设计图根元素的font-size转换。

3.具体实现

3.1 Vite项目：用到postCssPxToRem 插件和amfe-flexible库

vite.config.ts文件


import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
// 引入postCssPxToRem
import postCssPxToRem from "postcss-pxtorem";
import * as path from "path";

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env: Partial<ImportMetaEnv> = loadEnv(mode, process.cwd());
  return {
    base: "./",
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "src"),
      },
    },
    plugins: [vue()],
    css: {
      postcss: {
        plugins: [
          postCssPxToRem({
            // 自适应，px>rem转换
            rootValue: 39, //pc端建议：192，移动端建议：75；设计稿宽度的1 / 10
            propList: ["*", "!border"], // 除 border 外所有px 转 rem // 需要转换的属性，这里选择全部都进行转换
            selectorBlackList: [".norem"],
            // 过滤掉norem-开头的class，不进行rem转换，这个内容可以不写
            unitPrecision: 5, // 转换后的精度，即小数点位数
            replace: true, // 是否直接更换属性值而不添加备份属性
            mediaQuery: false, // 是否在媒体查询中也转换px为rem
            minPixelValue: 0, // 设置要转换的最小像素值
          }),
        ],
      },
    },
  };
});

main.ts文件


import 'amfe-flexible’