当前位置：首页 > article >正文

PostCSS插件——postcss-pxtorem结合动态调整rem实现字体自适应

article 2024/12/24 17:15:00

PostCSS插件——postcss-pxtorem结合动态调整rem实现字体自适应

背景介绍

在进行开发过程中，当页面处于低分辨率设备（小于1080*1920）的时候，会出现字体过大导致的页面布局不协调的情况，原因是页面布局使用的是vm，vh以及弹性盒模型，但是文字大小并不会根据页面大小变化进行自适应，所以要对文字进行响应式处理，总体思路是将选择其中的px转换为rem，动态的根据设备尺寸修改rem基准值，从而改变字体大小。

1.1 插件介绍

首先是rem单位，在响应式设计中，rem和视口单位更加适用。postcss-pxtorem是一个PostCSS插件，可以将CSS中的px单位自动转换为rem单位，简化了开发过程。

1.2 安装与配置

1.2.1 安装

使用npm安装postcss-pxtorem插件：

npm install postcss-pxtorem --save-dev

1.2.2 配置

在vue.config.js中进行配置：

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({ // 把px单位换算成rem单位
            rootValue: 16, //换算基数，
            unitPrecision: 6, //允许REM单位增长到的十进制数字,小数点后保留的位数。
            propList: ['*'],
            exclude: /(node_module)/,  //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前				端UI框架内的px也转换成rem，请把此属性设为默认值
            //selectorBlackList: ['.el'], //要忽略并保留为px的选择器，本项目我是用的vant ui框架，所以忽略他
            mediaQuery: false,  //（布尔值）允许在媒体查询中转换px。
            minPixelValue: 1,//设置要替换的最小像素值,
          })
        ]
      }
    }
  }
}

1.2.3 测试

重新运行项目，打开控制台查看元素样式看px单位是否被转化为rem

1.3 结合动态调整`rem`基准值实现字体自适应

为了实现更为灵活和精确的响应式设计，postcss-pxtorem插件常常与动态调整根元素（<html>）的font-size结合使用。通过这种组合，开发者不仅能够自动将px单位转换为rem单位，还能根据设备的尺寸动态调整rem的基准值，从而实现字体和布局的自适应。

1.3.1 工作原理概述

自动转换px为rem：
- postcss-pxtorem插件在构建阶段将CSS中的px单位自动转换为rem单位。转换后的rem值基于配置文件中设定的rootValue。
动态调整根元素font-size：
- 在运行时，通过JavaScript根据设备的视口宽度动态计算并设置根元素的font-size。这种方法确保了rem单位在不同设备上的比例关系保持一致，实现了响应式设计。
结合使用的优势：
- 开发效率：自动转换减少了手动修改px为rem的工作量。
- 灵活性：动态调整font-size使得布局和字体能够根据设备尺寸自动适配，无需频繁修改CSS。

1.3.2 实现步骤

以下是将postcss-pxtorem插件与动态调整根元素font-size结合使用的详细步骤：

步骤一：安装postcss-pxtorem插件，并配置，参考1.2

步骤二：动态调整根元素`font-size`

通过JavaScript动态计算并设置根元素的font-size，使得rem单位能够根据设备的视口宽度进行自适应调整。

//创建rem.js文件
function fontSize(initSize) {
  //基准大小
  const baseSize = initSize || 16
  //当前页面宽度相对于1920宽的缩放比例, 可根据自己需要修改
  const scale = document.documentElement.clientWidth / 1920
  //设置页面根节点字体大小, 字体大小最小为10
  let fontSize =
    baseSize * Math.min(scale, 2) > 10 ? baseSize * Math.min(scale, 2) : 10
  return fontSize + "px"
}
//改变窗口大小重新设置rem
function resize() {
  document.documentElement.style.fontSize = fontSize()
}
window.onresize = resize
resize()

解析：

动态计算字体大小：
- 计算公式：
```
baseSize * Math.min(scale, 2) > 10 ? baseSize * Math.min(scale, 2) : 10
```
- 设置最小字体和最大缩放大小以防止在极端设备上字体过小或过大。
- 监听resize事件，动态调整font-size。
使用rem单位的优势：
- 元素尺寸和字体大小随着根字体大小的变化而自动适应不同设备。
- 无需手动修改每个元素的大小，简化了响应式设计的实现。

步骤三：引入文件并运行项目

引入文件：

//在main.js中引入rem.js
import "@/utils/rem"

运行项目：
```
npm run dev
```
测试起效

打开浏览器控制台，改变窗口大小，观察字体时是否变化

1.3.3 优化与注意事项

在将postcss-pxtorem插件与动态调整根字体大小结合使用时，需要注意以下几点以确保最佳效果：

确保一致的rootValue：
- postcss-pxtorem插件的rootValue应与动态计算根字体大小的基准值保持一致。例如，如果设计稿中1rem等于16px，那么rootValue应设置为16。
节流与防抖：
- 在监听resize事件时，使用节流（throttle）或防抖（debounce）技术，以减少频繁触发的性能开销。
最小与最大字体大小设置：
- 通过设置根字体大小的最小值和最大值，防止在极端设备上出现过小或过大的字体，确保良好的可读性。
与其他响应式技术结合：
- 结合使用Flexbox、Grid布局和媒体查询等技术，进一步提升布局的灵活性和适应性。