postcss-pxtorem只让一个页面

使用rem单位，而不是px单位的方法。
要在一个页面中使用postcss-pxtorem插件将px单位转换为rem单位，首先需要安装postcss、postcss-loader和postcss-pxtorem插件。可以使用以下命令进行安装：

npm i postcss postcss-loader postcss-pxtorem -D

接下来，根据你所使用的框架的配置文件进行配置。以vite框架为例，需要在vite.config.js文件中增加相应的配置项。例如：

import { defineConfig } from 'vite';
import postCssPxToRem from 'postcss-pxtorem';

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        postCssPxToRem({
          rootValue: 14, // 设置1rem的大小
          propList: ['*'],
        }),
      ],
    },
  },
});

以上配置中，rootValue表示1rem的大小为14px，propList表示要转换的属性列表。根据需要可以进行调整。

在代码开发过程中，只需要正常使用px单位编写样式。在编译运行之后，postcss-pxtorem插件会自动将样式中的px单位转换为rem单位。例如，样式代码如下：

div {
  font-size: 18px;
  font-weight: 800;
  color: #000;
}

在运行之后，样式会自动转换为：

div {
  font-size: 1.28571rem;
  font-weight: 800;
  color: #000;
}

以上是在vite框架中使用postcss-pxtorem插件的配置方法，其他框架可以进行参考，并根据自己的架构进行相应的更改。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [移动端适配 rem、postcss-pxtorem、postcss-px-to-viewport、vw vh](https://blog.csdn.net/xuyanl/article/details/129499800)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [postcss postcss-pxtorem将px转为rem的实现](https://blog.csdn.net/friend_ship/article/details/128225615)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]