web 使用rem方案适配移动端

派大星jason
160 阅读3分钟

介绍及原理

原理

rem单位的特点，是1rem对应的px值等于根元素html的font-size值。也就是说，当根元素html的font-size值变化时，1rem的值会跟随着动态变化。比如:

有一个div，他的高度设置为1rem，当页面内根元素html的font-size为16px时，这个div的高度就是16px；当页面内的根元素htmlfont-size为32px时，这个div的高度就是32px。

postcss-pxtorem插件会将我们写在样式中的px根据我们在vite.config.js中设置的rootValue值，按比例转化为rem。(要注意哦，行内样式中的px不会被转化为rem)

amfe-flexible插件会根据当前可展示区域的实际宽度，动态设置根元素html的font-size为可展示区域宽度的十分之一。(这也就是为什么我们在vite.config.js中设置rootValue值时需要设置为Ul设计稿的十分之 一，是为了与此插件对font-size的设置相对应)

介绍

amfe-flexible插件是用于移动端适配的一个工具。

它的主要作用是根据设备的宽度动态修改根元素html的字体大小，从而实现不同设备之间的页面适配。

这个插件是由阿里巴巴手淘团队开源的，它通过设置1rem等于视口宽度的十分之一（viewWidth/10），使得开发者可以使用rem单位来进行布局，而不必关心具体的像素值，从而简化了移动端不同屏幕尺寸的适配工作。

结合postcss-pxtorem使用:

为了进一步简化开发流程，amfe-flexible通常与postcss-pxtorem插件一起使用。

postcss-pxtorem是一个PostCSS插件，它可以自动将CSS文件中的px单位转换为rem单位。这样，开发者可以直接在CSS中使用px单位，而postcss-pxtorem会自动完成单位转换。

插件安装

npm install postcss-pxtorem amfe-flexible

如果运行项目后报错 PostCSS plugin postcss-pxtorem requires PostCSS 8.

需要降低 postcss-pxtorem 的版本

卸载默认安装的版本 
npm uninstall postcss-pxtorem
 
安装指定版本
npm i postcss-pxtorem@5.1.1

插件配置

postcss-pxtorem配置

在vite.config.js中进行配置

// 引入pxtorem插件
import postCssPxToRem from "postcss-pxtorem";
 
export default defineConfig({
  css: {
    postcss: {
      plugins: [
        postCssPxToRem({
          // 配置在将px转化为rem时 1rem等于多少px(因为我们搭配使用了amfe-flexible插件 此处我们需要设置的值应是UI设计稿全屏基准宽度的十分之一)
		// 例如:当UI设计稿的全屏基准宽度是750px时 此处设置的值为75
		// 注意:如果项目中使用了vant组件库,那么需要注意:vant的设计稿总宽度是375px 其十分之一应是37.5(需要区分设置)
		rootValue({ file }) {
			return file.indexOf('vant') !== -1 ? 37.5 : 75;
		},
          // 所有px均转化为rem
          propList: ["*"]
          // 若想设置部分样式不转化 可以在配置项中写出
          // 例如: 除 border和font-size外 所有px均转化为rem
          // propList: ["*", "!border","!font-size"], 
          // exclude: /node_modules/i, // 排除node_modules内的文件
        })
      ]
    }
  }
})

postcss-pxtorem更多配置项：

amfe-flexible配置

在main.js中进行引入

import 'amfe-flexible'

补充

忽略单个属性的最简单方法是在像素单位声明中使用大写字母，将px写为Px或PX

.ignore {
    border: 1Px solid; 
    border-width: 2PX; 
}
avatar
文章
阅读
粉丝