大气网络公司网站模板杭州百度推广代理商
最近做了一个 react + next 的网址大全项目，需要实现不管是大屏还是小屏，都能让整个页面在一页中显示而不出现滚动条，一顿操作后还是有点小瑕疵，大佬给我推荐了一个插件：postcss-px-to-viewport，试了一下，确实好用，记录一下。
一、安装 postcss-px-to-viewport
pnpm install postcss postcss-px-to-viewport --save-dev安装完后，可以看到我们的项目依赖中多了一行
二、在项目根目录创建 postcss.config.js 文件
键入以下内容
module.exports = {plugins: {'postcss-import': {}, // 必须放在第一个'postcss-px-to-viewport': {viewportWidth: 1920,unitPrecision: 5,viewportUnit: 'vw',selectorBlackList: [],minPixelValue: 1,mediaQuery: false},}
}
三、修改 next.config.ts 文件
import type { NextConfig } from 'next';
import { join, resolve } from 'path';const nextConfig: NextConfig = {output: 'export',distDir: 'build',// 使用相对路径前缀，确保静态资源可以正确加载assetPrefix: './',images: {unoptimized: true,},outputFileTracingRoot: process.cwd(),experimental: {optimizeCss: false},webpack: (config, { isServer }) => {// 配置 CSS 输出路径if (!isServer) {const miniCssExtractPlugin = config.plugins.find((p: { constructor: { name: string; }; }) => p.constructor.name === 'MiniCssExtractPlugin');if (miniCssExtractPlugin) {(miniCssExtractPlugin as any).options.filename = 'static/css/[name].[contenthash].css';(miniCssExtractPlugin as any).options.chunkFilename = 'static/css/[name].[contenthash].css';}}// 配置 manifest 文件输出路径config.plugins.push(new (require('webpack').DefinePlugin)({'process.env.MANIFEST_OUTPUT_PATH': JSON.stringify(resolve(__dirname, 'build/_next/static'))}));// 配置图片和其他资源的输出路径config.module.rules.forEach((rule: { oneOf: any[]; }) => {if (rule.oneOf) {rule.oneOf.forEach((oneOfRule: { type?: string | undefined; generator?: { filename: string; } | undefined; test?: { test: (arg0: string) => boolean; } | undefined; }) => {const assetRule = oneOfRule as { type?: string; generator?: { filename: string; }; test?: { test: (arg0: string) => boolean } };if (assetRule.type === 'asset') {assetRule.generator = {filename: 'static/media/[name].[contenthash][ext]',};}if (assetRule.test &&typeof assetRule.test.test === 'function' &&assetRule.test.test('.svg')) {assetRule.generator = {filename: 'static/media/[name].[contenthash][ext]',};}});}});// 确保公共路径正确设置config.output = {...config.output,publicPath: './_next/',};return config;},
};export default nextConfig;
大功告成！现在跑动项目，会发现，我们的 px 变成了 vw，可以自动自适应啦！