vs code px to rem 配置

Visual Studio Code (VS Code) 提供了一个名为 "px to rem" 的插件，可以帮助开发者方便地在编写 CSS 代码时，将像素值转换为相对单位 rem。这在响应式设计中非常有用，因为 rem 值会根据视口大小动态调整。以下是设置和配置 VS Code 中 "px to rem" 插件的基本步骤：

1. **安装插件**:
打开 VS Code，转到扩展商店（`Code > Extensions`），搜索 "px to rem"，找到合适的插件（如 "px-to-rem-vscode" 或类似名称），然后点击 "Install"。

2. **配置插件**:
安装完成后，你需要在设置中启用并配置插件。打开用户或工作区的设置（`Code > Preferences > Settings` 或 `Ctrl + ,`）, 在 JSON 格式的设置文件中添加如下配置：

   {
       "px-to-rem-vscode.useGlobalStyles": true, // 是否使用全局样式中的值，默认为true
       "px-to-rem-vscode.unitToConvert": "px", // 需要转换的单位，默认为 "px"
       "px-to-rem-vscode.remValue": 16, // 设定根元素的 font-size，默认为 16px
       // 可选的自定义转换规则，例如：
       "px-to-rem-vscode.customRules": {
           "button": 1,
           "header": 1.5
       }
   }

这里 `"remValue"` 是设定根元素字体大小的基础值，其余键值对用于应用自定义的转换规则。

3. **使用插件**:
在编辑 CSS 文件时，当你选中一个像素值，按住 `Ctrl+Enter` 或者右键选择 "Convert to rem"，插件就会把选中的像素值转换为 rem 单位。