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

网站建设实验报告高端快速建站

wzjs 2025/7/20 11:12:44

网站建设实验报告,高端快速建站,wordpress addmetabox,集团公司做网站的好处有什么序言阅读前首先了解即将要用到的两个包的作用 1.postcss-pxtorem 自动将 CSS 中的 px 单位转换为 rem 单位按照设计稿尺寸直接写 px 值，由插件自动计算 rem 值 2.amfe-flexible 动态设置根元素的 font-size（即 1rem 的值）根据设备屏幕宽度和…

序言

阅读前首先了解即将要用到的两个包的作用

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>);
}