记一次与网页自适应相关的需求因为工作上有业务老师使用系统时说网页字体展示太小，通过放大缩小浏览器页面比例，网页字体大小无

因为工作上有业务老师使用系统时说网页字体展示太小，通过放大缩小浏览器页面比例，网页字体大小无变化。

遂发现项目为了适应各种屏幕采用了自适应布局，使用了 postcss 的 postcss-px-to-viewport 插件配置, 将除了行内样式页面上的元素单位由 px 转成了 vw ，项目整体用的是 vue3 + vite 的技术栈。

vite.config.js 配置文件

import pxtovw from 'postcss-px-to-viewport';
const loaderPxtovw = pxtovw({
  //这里是设计稿宽度
  viewportWidth: 1920,
  viewportUnit: 'vw'
});

// 以下为部分配置
import { UserConfig, ConfigEnv } from 'vite';
export default ({ command, mode }: ConfigEnv): UserConfig => {
    css: {
      postcss: {
        plugins: [loaderPxtovw],
      }
    }
}

思考过后，发现因为采用的是 vw 单位，也就是根据 页面视口宽度 决定的百分比布局。所以放大缩小比例并不影响字体实际的大小展示，后来决定把整体页面元素单位换成 rem （根据页面根元素的字体大小的相对单位）。

vite.config.js 配置文件

import pxtovw from 'postcss-px-to-viewport';
const loaderPxtovw = pxtovw({
  //这里是设计稿宽度
  viewportWidth: 1920,
  viewportUnit: 'rem',
  fontViewportUnit: 'rem'
});

// 以下为部分配置
import { UserConfig, ConfigEnv } from 'vite';
export default ({ command, mode }: ConfigEnv): UserConfig => {
    css: {
      postcss: {
        plugins: [loaderPxtovw],
      }
    }
}

根目录下的 index.html 文件

<!DOCTYPE html>
<html lang="en" style="font-size: 19.2px" data-js-focus-visible>
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon-sw.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>xxxxx</title>
  </head>

  <body class="antialiased text-slate-500 dark:text-slate-400 bg-white">
    <div id="app" bg-gray-100></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

需求实现