怎么使用px2rem进行适配

使用 px2rem 进行适配的步骤如下：

1. 安装 px2rem 插件：可以使用 npm install px2rem-loader --save-dev 命令进行安装。

2. 在 webpack 配置文件中配置 px2rem-loader：在 module.rules 中添加如下配置：

{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'px2rem-loader',
options: {
remUnit: 75 // 设计稿宽度 / 10
}
}
]
}

3. 设计稿尺寸设置：将设计稿的宽度设置为 750px，即 1rem = 75px。

4. 编写样式：在编写样式时，直接使用 px 单位，px2rem-loader 会自动转换为 rem 单位。

通过以上步骤，即可使用 px2rem 进行适配。需要注意的是，如果有些地方需要使用 px 单位，可以使用大写的 PX 来避免被转换。

相关问题

postcss-pxtorem pc适配

postcss-pxtorem是一个PostCSS插件，它用于自动将设计稿中常用的像素单位（如`px`）转换成相对单位（如`rem`），以便于响应式设计（pc适配）。设计师通常会在设计稿中使用固定像素值，但在浏览器的不同分辨率下，这种硬编码的像素可能会导致布局错乱。postcss-pxtorem通过设置一个基础字号（比如100px等同于1rem），将所有像素转换成相对于这个基数的rem，使得元素在屏幕尺寸变化时能保持合理的尺寸比例。

使用步骤大致如下：
1. 安装postcss-pxtorem插件：`npm install postcss-pxtorem`
2. 在PostCSS配置文件中引入并配置该插件：

module.exports = {
  plugins: [
    require('postcss-pxtorem')({
      rootValue: 100, // 基准字号大小，例如100px等于1rem
      propList: ['*'], // 需要转换的属性名，可以指定为仅转换部分属性
      unitToRem: true, // 将px转换为rem
    }),
  ],
};

px2rem pc端适配完整代码

这是一个简单的px2rem的代码示例，可用于PC端适配：

// 设置rem基准值
function setRem() {
  var width = document.documentElement.clientWidth; // 获取窗口宽度
  var baseSize = 100; // 这里设置的是基准字体大小，可以根据设计稿调整
  var scale = width / 1920; // 1920是设计稿的宽度，可以根据实际情况调整
  var remSize = baseSize * scale; // 计算rem字体大小
  document.documentElement.style.fontSize = remSize + 'px'; // 设置根元素的字体大小
}

// 监听窗口变化
window.addEventListener('resize', function () {
  setRem();
});

// 初始化
setRem();

在这个代码示例中，我们首先定义了一个`setRem`函数，用于设置根元素的`fontSize`。在函数中，我们获取了窗口的宽度，然后计算出了基准字体大小和缩放比例。最后，我们将根元素的`fontSize`设置为计算出的rem字体大小。

我们还在`window`对象上添加了一个`resize`事件监听器，以便在窗口大小发生变化时重新计算并设置根元素的`fontSize`。

最后，我们在页面加载时调用一次`setRem`函数，以确保初始状态下根元素的`fontSize`已正确设置。