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

[react]Next.js之自适应布局和高清屏幕适配解决方案

article 2026/1/21 16:49:16

序言

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

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出多尺寸设计图.

[react]Next.js之自适应布局和高清屏幕适配解决方案

序言阅读前首先了解即将要用到的两个包的作用 1.postcss-pxtorem 自动将 CSS 中的 px 单位转换为 rem 单位按照设计稿尺寸直接写 px 值，由插件自动计算 rem 值 2.amfe-flexible 动态设置根元素的 font-size（即 1rem 的值）根据设备屏幕宽度和…...

编程日记 2026/1/18 0:28:12

STM32H503CB升级BootLoader

首先，使用SWD接口，ST-LINK连接电脑和板子。安装SetupSTM32CubeProgrammer_win64 版本2.19。以下是接线和软件操作截图。...

编程日记 2026/1/19 4:36:59

在Apple Silicon上部署Spark-TTS：四大核心库的技术魔法解析！！！

在Apple Silicon上部署Spark-TTS：四大核心库的技术魔法解析 🚀 （M2芯片实测｜Python 3.12.9PyTorch 2.6.0全流程解析） 一、核心库功能全景图 🔍 在Spark-TTS的部署过程中，pip install numpy li…...

编程日记 2026/1/20 15:55:22

VMWare 16 PRO 安装 Rocky8 并部署 MySQL8

VMWare 16 PRO 安装 Rocky8 并部署 MySQL8 一.Rocky OS 下载1.官网二.配置 Rocky1.创建新的虚拟机2.稍后安装系统3.选择系统模板4.设置名字和位置5.设置大小6.自定义硬件设置核心、运存和系统镜像7.完成三.启动安装1.上下键直接选择安装2.回车安装3.设置分区（默认即可）和 roo…...

编程日记 2026/1/19 6:04:56

cursor如何回退一键回退多个文件的修改

当我们使用 Cursor 写代码时，起初可能操作得很顺利，但某次更改或许会让代码变得面目全非。这时候如果没有使用 Git 该怎么办呢？别担心，Cursor 已经为我们考虑到了。具体的操作如下： 当我们要取消某次操作时&#xf…...

编程日记 2026/1/19 6:03:23

基于RV1126开发板的口罩识别算法开发

1. 口罩识别简介口罩识别是一种基于深度学习的判断人员有没有戴口罩的分类算法，能广泛的用于安防、生产安全等多种场景。本算法先基于人脸检测和人脸标准化获取的标准人脸，然后输入到口罩识别分类算法进行识别。本人脸检测算法在数据集表现如下所示&am…...

编程日记 2026/1/19 5:24:37

PyCharm显示主菜单和工具栏

显示主菜单新版 PyCharm 是不显示主菜单的，要想显示主菜单和工具栏，则通过 “视图” → “外观” ，勾选 “在单独的工具栏中显示主菜单” 和 “工具栏” 即可。设置工具栏此时工具栏里并没有什么工具，因此我们需要自定义工具…...

编程日记 2026/1/19 6:13:50

Java工程行业管理软件源码 - 全面的项目管理工具 - 工程项目模块与功能一览

工程项目管理系统 Spring CloudSpring BootMybatisVueElementUI前后端分离构建工程项目管理系统项目背景随着公司的快速发展，企业人员和经营规模不断壮大。为了提高工程管理效率、减轻劳动强度、提高信息处理速度和准确性，公司对内部工程管理的提升提…...

编程日记 2026/1/19 5:23:24

Redis 高可用集群搭建与优化实践

在分布式系统中，缓存技术用于提升性能和响应速度。 Redis 作为一款高性能的键值存储系统，广泛应用于缓存、消息队列和会话管理等场景。随着业务规模的扩大，单机 Redis 的性能和可用性逐渐无法满足需求。因此，搭建高可用的 Redis 集群可以解决这一问题。我将详细介绍 Red…...

编程日记 2026/1/19 7:24:29

利用多GPU计算探索量子无序及AI拓展

量子无序系统的领域是凝聚态物理学中一个引人入胜的前沿。与它们完全有序的对应物不同，这些材料表现出量子力学和内在随机性的复杂相互作用，导致了许多令人着迷且常常难以理解的行为。量子自旋玻璃就是一个典型的例子，在这种系统中&#xff0…...

编程日记 2025/12/14 23:49:09

【AI大模型】基于阿里百炼大模型进行调用

目录一、认识阿里云百炼模型广场创建自己的模型二、AI扩图示例 1、开头服务、设置秘钥 2、选择HTTP方式调用流程 3、创建任务请求示例 4、发送http请求提交任务 5、查看任务进度的流程设计 6、后端查看任务进度代码三、总结大家好，我是jstart千语…...

编程日记 2026/1/19 5:26:49

【神经网络结构的组成】深入理解转置卷积与转置卷积核

🌈 个人主页：十二月的猫-CSDN博客 🔥 系列专栏： 🏀《深度学习理论直觉三十讲》_十二月的猫的博客-CSDN博客 💪🏻 十二月的寒冬阻挡不了春天的脚步，十二点的黑夜遮蔽不住黎明的曙光 …...

编程日记 2026/1/19 23:27:15

数据战略新范式：从中台沉淀到服务觉醒，SQL2API 如何重塑数据价值链条？

一、数据中台退烧：从 “战略神话” 到 “现实拷问” 曾几何时，数据中台被视为企业数字化转型的 “万能解药”，承载着统一数据资产、打破业务壁垒的厚望。然而，大量实践暴露出其固有缺陷：某零售企业投入 500 万元建设中…...

编程日记 2025/12/23 15:58:45

Docker 代理配置全攻略：从入门到企业级实践

Docker 代理配置终极指南：从原理到实践在企业环境中，Docker 的网络访问常常需要通过代理来完成，例如拉取镜像或在容器内访问外部网络。本文将从核心流程、配置方法到验证步骤，全面解析 Docker 代理的配置方式，助你轻…...

编程日记 2025/12/4 11:13:07

MyBatis-plus笔记（上）

简介 [MyBatis-Plus]（简称 MP）是一个 [MyBatis]的增强工具，在 MyBatis 的基础上只做增强不做改变，为简化开发、提高效率而生。 mybatis-plus总结： 注意：mybatis-puls仅局限于单表操作。自动生成单表的C…...

编程日记 2026/1/20 4:11:09

大模型微调数据集怎么搞？基于easydataset实现文档转换问答对json数据集！

微调的难点之一在与数据集。本文介绍一种将文档转换为问答数据集的方法，超级快！ 上图左侧是我的原文档，右侧是我基于文档生成的数据集。原理是通过将文档片段发送给ollama本地模型，然后本地模型生成有关问题，并基于文…...

编程日记 2026/1/17 16:27:28

opencv 灰度实验

opencv 灰度实验 1. 最大值法2. 平均值法3. 加权均值法4(直接读取灰度图)cv2.IMREAD_GRAYSCALE5内置将原图转换为灰度图cv2.cvtColor()6 两个极端的灰度值灰度图与彩色图最大的不同就是：彩色图是由R、G、B三个通道组成，而灰度图只有一个通道&#xff0c…...

编程日记 2026/1/19 23:46:38

安卓基础（无障碍）

配置无障碍服务在 res/xml 目录下创建一个 accessibility_service_config.xml 文件，用于配置无障碍服务的相关信息，例如要监听的事件类型、反馈类型等。 <?xml version"1.0" encoding"utf-8"?> <!-- 这行代码告诉电脑…...

编程日记 2026/1/15 18:13:49

解决在linux下运行rust/tauri项目出现窗口有内容，但是渲染出来成纯黑问题

起因最近折腾了一下rust/tauri程序开发，据说这玩意性能非常牛皮就玩了一下，但是我运行打包一直出现一个奇怪问题，窗口能正常打开，但是是纯黑的什么内容都没有，鼠标移上去又发现指针会变换（看起来是内容又…...

编程日记 2025/10/21 16:58:32

高性能内存kv数据库Redis（续）

目录四.主从同步与对象模型 1.Redis 淘汰策略 2.Redis 如何做到持久化 2.1 redis为什么要实现持久化 2.2fork进程的写时复制机制 2.3大Key的影响 2.4redis做持久化的方式 2.5 aof 2.6 rdb 2.7 redis 持久化方式的优缺点 3.redis里面的高可用体现在哪里？ 3.1r…...

编程日记 2026/1/19 22:32:48

从0到1构建企业级消息系统服务体系（一）：产品架构视角下的高并发设计与动态响应能力建设

从0到1构建企业级消息系统服务体系（一）：产品架构视角下的高并发设计与动态响应能力建设 | 从今天开始将持续更新此专题下的文章，讲述从产品角度是如何从0-1的构建一个企业级的消息系统，从系统架构设计、产品架构设计&…...

编程日记 2025/11/30 9:53:06

ElasticSearch中常用的数据类型

一、映射 Elasticsearch中通过映射来指定字段的数据类型，映射方式有2种，静态映射和动态映射。 1.动态映射使用动态映射时，无须指定字段的数据类型，Elasticshearch会自动根据字段内容来判断映射到哪个数据类型。比如&#xff…...

编程日记 2025/11/29 14:11:17

【go】--编译

go build -o [编译完成的可执行文件] [需要编译的.go文件]#例如 go build -o myapp main.go#确保编译的结果和当前运行环境相同 #查看arch uname -a在 Linux 中查看和修改 GOOS 和 GOARCH 环境变量： 1. 查看当前 Go 环境变量 # 查看所有Go相关的环境变量 go env# …...

编程日记 2025/11/30 19:50:15

【指纹浏览器系列-chromium编译】

本文提供了一步一步的指导来帮助读者在Windows环境下成功编译Chromium浏览器。涵盖了系统需求、开发环境搭建、代码下载及构建等关键步骤。官方编译文档：https://github.com/chromium/chromium/blob/main/docs/windows_build_instructions.md 一、系统要求一台…...

编程日记 2026/1/20 4:17:42

Docker华为云创建私人镜像仓库

Docker华为云创建私人镜像仓库在华为云官网的产品中搜索容器镜像服务 ： 或者在其他页面的搜索栏中搜索容器镜像服务 ： 进入到页面后，点击创建组织 （华为云的镜像仓库称为组织）： 设置组织名字后&…...

编程日记 2026/1/19 22:33:43

Ubuntu 22.04安装MySQL ： Qwen2.5 模型对话数据收集与微调教程

在Ubuntu 22.04安装MySQL的教程请点击下方链接进行参考：点击这里获取MySQL安装教程今天将为大家带来如何微调Qwen2.5模型并连接数据库进行对话的教程。快跟着小编一起试试吧~ 1 大模型 Qwen2.5 微调步骤 1.1 从 github 仓库克隆项目克隆存储库：#拉取代码 git clo…...

编程日记 2026/1/20 0:13:38