Vue3+vite 使用rem 进行移动端样式适配

用户59400806849
2,088 阅读2分钟

在Vue3项目中使用Vite并实现移动端页面布局时，使用rem作为单位是一种常见的做法。rem是相对于根元素（<html>）的字体大小的单位，这使得我们可以通过改变根元素的字体大小来响应不同屏幕尺寸，实现布局的适应性。

以下是如何在Vue3 + Vite项目中使用rem的步骤：

  1. 安装PostCSS插件：在Vite项目中，通常使用PostCSS来处理CSS。你需要安装postcss-pxtorem插件，它可以将像素单位转换为rem单位。

    安装插件：

    npm install postcss-pxtorem --save-dev

  2. 配置Vite：在vite.config.js文件中配置PostCSS插件。

    // vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pxtorem from 'postcss-pxtorem'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue()
  ],
  css: {
    postcss: {
      plugins: [
        pxtorem({
          rootValue: 37.5, // 设计稿宽度为375时，rootValue设为37.5
          propList: ['*'], // 需要转换的属性
        }),
      ],
    },
  },
})

    在这个配置中，rootValue是根元素的字体大小，这个值通常根据设计稿的宽度来设定。例如，如果设计稿的宽度是375px，那么rootValue可以设置为37.5，这样1rem就等于37.5px。

  3. 编写CSS：在编写CSS时，你可以像平常一样使用像素单位。postcss-pxtorem插件会自动将这些像素单位转换为rem单位。

    /* 编写CSS时使用px单位 */
.container {
  width: 375px; /* 在编译后会被转换为rem单位 */
  height: 100px;
}

  4. 设置HTML字体大小：在Vue应用的入口文件（如main.js或main.ts）中，设置根元素的字体大小。

    // main.js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 根据设备宽度动态设置根元素的字体大小
const setHtmlFontSize = () => {
  const designWidth = 375; // 设计稿宽度
  const html = document.documentElement;
  html.style.fontSize = `${html.clientWidth / designWidth * 37.5}px`;
};

setHtmlFontSize();
window.onresize = setHtmlFontSize;

app.mount('#app')

    这段代码会根据设备的宽度动态设置根元素的字体大小，从而确保在不同设备上rem单位的一致性。

通过以上步骤，你可以在Vue3 + Vite项目中使用rem单位，实现移动端页面的响应式布局。

  • 也可以将Vue应用的入口文件（如main.js或main.ts）的以下代码进行封装，这样可以提高代码的可重用性和可维护性。
   // main.js、
   // 根据设备宽度动态设置根元素的字体大小
   const setHtmlFontSize = () => {
     const designWidth = 375; // 设计稿宽度
     const html = document.documentElement;
     html.style.fontSize = `${html.clientWidth / designWidth * 37.5}px`;
   };

   setHtmlFontSize();
   window.onresize = setHtmlFontSize;、

以下是如何在Vue3项目中封装这个功能的示例：

  1. 创建一个新的JavaScript文件：在你的Vue3项目中，创建一个新的文件，例如utils/rem.js。

  2. 封装函数：在这个文件中，编写一个函数来封装动态设置根元素字体大小的逻辑。

    javascript

    复制

    // utils/rem.js
export const setRem = (designWidth = 375, baseSize = 37.5) => {
  const html = document.documentElement;
  const setSize = () => {
    html.style.fontSize = `${html.clientWidth / designWidth * baseSize}px`;
  };
  setSize();
  window.onresize = setSize;
};

    在这个函数中，designWidth是设计稿的宽度，baseSize是根元素的基准字体大小。函数内部定义了一个setSize函数，用于设置根元素的字体大小，并在窗口大小变化时重新设置。

  3. 在Vue应用中使用封装的函数：在你的Vue应用的入口文件（如main.js或main.ts）中导入并使用这个函数。

    javascript

    复制

    // main.js
import { createApp } from 'vue'
import App from './App.vue'
import { setRem } from './utils/rem'

const app = createApp(App)

// 设置根元素的字体大小
setRem(375, 37.5);

app.mount('#app')

通过这种方式，你将动态设置根元素字体大小的功能封装在一个独立的模块中，使得代码更加模块化和清晰。

avatar
文章
阅读
粉丝