设计稿是375配置rem

如果设计稿的宽度是375px，并且使用了rem作为单位，那么在任何设备上都可以实现等比缩放。具体的转换方法如下：

1. 设置html的font-size为屏幕宽度的1/375倍，即：font-size = screen.width / 375 + "px"。

2. 其他元素的尺寸就按照设计稿上的尺寸除以100，加上rem单位即可。

例如，设计稿上有一个宽度为100px的按钮，那么在CSS中应该这样写：

.btn {
  width: 1rem; /* 100px / 100 */
  height: 0.4rem; /* 40px / 100 */
  font-size: 0.14rem; /* 14px / 100 */
}

这样就可以实现在不同设备上的等比缩放了。

相关问题

vscode配置rem

要在 VS Code 中配置 rem 单位，可以使用以下步骤：

1. 打开 VS Code，并打开要编辑的项目文件夹。
2. 在项目根目录下创建一个名为 `.vscode` 的文件夹。
3. 在 `.vscode` 文件夹中创建一个名为 `settings.json` 的文件。
4. 在 `settings.json` 文件中添加以下代码：

{
    "files.autoSave": "off",
    "editor.fontSize": 16,
    "editor.tabSize": 4,
    "editor.insertSpaces": true,
    "editor.detectIndentation": false,
    "editor.wordWrap": "on",
    "editor.wordWrapColumn": 80,
    "editor.minimap.enabled": false,
    "editor.fontFamily": "Arial, sans-serif",
    "editor.lineHeight": 1.5,
    "editor.letterSpacing": 0.5,
    "editor.fontWeight": "normal",
    "editor.cursorBlinking": "phase",
    "editor.smoothScrolling": true,
    "editor.renderWhitespace": "none",
    "editor.renderControlCharacters": false,
    "editor.formatOnSave": true,
    "editor.formatOnType": true,
    "css.remUnit": 75
}

在上面的代码中，`css.remUnit` 是 rem 单位的基准值，通常设置为设计稿的宽度除以 10 或 7.5。例如，如果设计稿的宽度为 750px，那么基准值应该设置为 75。

5. 保存 `settings.json` 文件，并重新启动 VS Code。现在，您可以在 CSS 文件中使用 rem 单位了。

vue3 vite vant 配置rem适配

1. 安装 postcss-pxtorem 插件

npm install postcss-pxtorem -D

2. 在项目根目录下创建 postcss.config.js 文件，并添加配置

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 32, // 设计稿宽度/10，即32px = 1rem
      propList: ['*'],
      exclude: /(node_module)/
    }
  }
}

3. 在 vite.config.js 中添加 postcss 插件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue(),
    // 添加 postcss 插件
    require('postcss-pxtorem')({
      rootValue: 32,
      propList: ['*'],
      exclude: /(node_module)/
    })
  ]
})

4. 安装 lib-flexible

npm install lib-flexible -S

5. 在 main.js 中引入 lib-flexible

import 'lib-flexible/flexible.js'

6. 在 vant 官网中找到需要使用的组件，并按照官方文档中的使用方法修改样式，例如：

/* 修改按钮样式 */
.van-button {
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  border-radius: 20px;
}

修改为

.van-button {
  font-size: 0.4375rem;
  height: 1.25rem;
  line-height: 1.25rem;
  padding: 0 0.625rem;
  border-radius: 0.625rem;
}

通过以上步骤，即可完成 rem 适配的配置。