使用rem适配大屏可视化项目

使用rem适配大屏可视化项目

在公司里经常要开发大屏项目，老是要去适配各种分辨率感觉很麻烦，想找到一个一劳永逸的办法，经过多次尝试以及调研，最终选择了结合 rem、flex 以及 vw 和 vh 来实现这一目标。这种组合有效避免了留白、地图点击偏移等问题，并能满足大部分使用场景。

现在我们基于 Vite 快速创建一个项目。

创建项目

使用以下命令来创建一个新的 Vite 项目：

yarn create vite

安装依赖

为了实现响应式设计，我们需要安装以下依赖：

1. amfe-flexible：用于动态设置 rem 基准值。
2. postcss：一个工具，为 CSS 提供增强功能。
3. postcss-pxtorem：将 px 单位转换为 rem 单位。

使用以下命令安装这些依赖：

yarn add amfe-flexible postcss postcss-pxtorem

依赖介绍

amfe-flexible

amfe-flexible 是一个用于设置 rem 基准值的库。它根据浏览器的宽度动态计算出适合的基准值，使得 rem 的使用更为灵活。

postcss

postcss 是一个 CSS 处理工具，能够将 CSS 代码转换为符合规范的代码。它的插件生态丰富，可以实现诸如自动加前缀、转换单位等多种功能。

postcss-pxtorem

postcss-pxtorem 是一个 postcss 插件，用于将 CSS 中的 px 单位转换为 rem 单位。通过这个插件，我们可以方便地在代码中使用 px，并在构建时自动转换为 rem。

配置项目

引入 amfe-flexible

在项目的 main.js 中引入 amfe-flexible：

import 'amfe-flexible';

创建 PostCSS 配置文件

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

export default {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 192,
      propList: ['*'],
      exclude: /\/node_modules\//i,
    },
  },
};

配置说明

• rootValue：定义 rem 的基准值。因为我是的设计稿事1920*1080，所以设置为 192，可以根据设计稿的宽度进行调整。
• propList：定义需要转换的属性列表，['*'] 表示所有属性都进行转换。
• exclude：排除特定文件夹，通常我们不希望对 node_modules 中的 CSS 进行转换。

ok，就这么简单，我们可以随便写px了，他会自动转换为rem，但是行内样式和ui库默认样式是改不了rem的。

我的微信公众号： 梨的前端小屋