序言
閱讀前首先了解即將要用到的兩個包的作用
1.postcss-pxtorem
- 自動將 CSS 中的 px 單位轉換為 rem 單位
- 按照設計稿尺寸直接寫 px 值，由插件自動計算 rem 值
2.amfe-flexible
- 動態設置根元素的 font-size（即 1rem 的值）
- 根據設備屏幕寬度和 DPR 調整頁面縮放比例
- 解決 1px 邊框問題?
工作流程
1.單獨使用 postcss-pxtorem
- CSS源碼 → postcss-pxtorem轉換 → 固定rem值的CSS → 瀏覽器渲染（無動態調整）
2.單獨使用 amfe-flexible
- 瀏覽器加載 → amfe-flexible執行 → 動態計算html的font-size → 開發者手動用JS計算rem值 → 頁面渲染
3.搭配一起使用
- 設計稿(1440px) → postcss-pxtorem(÷144) → CSS(rem) → 瀏覽器 → amfe-flexible動態計算 → 實際渲染?
一:? css文件的px自動轉rem
1. 安裝
$ npm i?postcss-pxtorem -D
2. 配置文件
// 修改根目錄的postcss.config.mjs文件 ESM版
// 如果你的文件是postcss.config.js(CJS版), 自行百度教程
const config = {// 注意：你的項目是plugins: ["@tailwindcss/postcss"], 沒關系可以改成下面的對象結構plugins: {"@tailwindcss/postcss": {}, // 新增 postcss-pxtorem"postcss-pxtorem": {rootValue: 144, // 設計稿寬度/10 [注意: 如果不搭配amfe-flexible使用, 那么填寫16即可, 因為1rem = 16px]propList: ["*", "!font*", "!font-size"], // 忽略字體相關屬性，字體不需要remexclude: /node_modules/i, // 排除 node_modules 文件minPixelValue: 2, // 小于 2px 不轉換mediaQuery: false, // 不轉換媒體查詢中的 pxselectorBlackList: ["html"], // 黑名單，不轉換的選擇器 [注意: 如果不搭配amfe-flexible使用, 這行可以注釋]},// 可選的 autoprefixer（推薦添加, 讓項目兼容性更好, 記得安裝包npm i autoprefixer -D）autoprefixer: {overrideBrowserslist: ["last 2 versions", "> 1%"],},},
};export default config;
二:?動態設置html的font-size
現在百度存在最多的是lib-flexible的教程(已停止維護), 今天開始新項目就用amfe-flexible吧
1. 安裝
$ npm i?amfe-flexible -S
2. 新建文件
// 新建 AmfeFlexible.tsx , 與layout.tsx平級
'use client';import { useEffect } from 'react';export default function AmfeFlexible() {useEffect(() => {if (typeof window !== 'undefined') {import('amfe-flexible');}}, []);return null;
}// src目錄下新建 @types\amfe-flexible\index.d.ts , 與app文件夾同級
declare module 'amfe-flexible' {const flexible: {init: (options?: {designWidth?: number;designHeight?: number;maxWidth?: number;minWidth?: number;}) => void;};export default flexible;}3. 配置文件
// 配置src/app下的 layout.tsx ,以下代碼已精簡, 新增內容已標注
import { AntdRegistry } from "@ant-design/nextjs-registry";
import zhCN from "antd/locale/zh_CN";
import { ConfigProvider } from "antd";
// 新增
import AmfeFlexible from "./AmfeFlexible";export default function RootLayout({children,
}: Readonly<{children: React.ReactNode;
}>) {return (<html lang="zh"><head>//新增<metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/></head><body>//新增<AmfeFlexible /><ConfigProvider locale={zhCN}><AntdRegistry>{children}</AntdRegistry></ConfigProvider></body></html>);
}
題外話
如果你web項目用tailwind, 那么上面的方案就行不通了, 目前我能想到的解決方案就是讓ui設計的時候px盡量為@4的倍數.
因為tailwind的默認間距是0.25, 0.25*4=1, 在tailwind項目中, 如標題高度是64px, 這時候除以4, 得到16, 那么h-16?就寫好了, 這樣方便我們進行換算(如果你有自動轉換方法一定要留言告訴我!)
可能會有人說用h-[64px]就好了, 但是不符合我適配多端的需求, 如果只有響應式的需求就用tailwind的sm, md, lg, xl, 2xl就好, ui出多尺寸設計圖.
![Python 趣味學習 -數據類型脫口秀速記公式 [特殊字符]](http://pic.xiahunao.cn/Python 趣味學習 -數據類型脫口秀速記公式 [特殊字符])
