序言
阅读前首先了解即将要用到的两个包的作用
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"], // 忽略字体相关属性，字体不需要rem
- exclude: /node_modules/i, // 排除 node_modules 文件
- minPixelValue: 2, // 小于 2px 不转换
- mediaQuery: false, // 不转换媒体查询中的 px
- selectorBlackList: ["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;
- }
- // 配置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>
- //新增
- <meta
- name="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出多尺寸计划图.
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
