vue中使用rem布局的兩種方法小結(jié)

更新時(shí)間：2023年07月04日 10:59:38 作者：Robin_zero

這篇文章主要介紹了vue中使用rem布局的兩種方法小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue使用rem布局的兩種方法

在使用 vue-cli 開發(fā) H5 項(xiàng)目時(shí)，需要進(jìn)行 rem適配，下面提供兩種常用的方法（以 750 設(shè)計(jì)稿為例），希望對(duì)大家有所幫助。

方法一

在 index.html 或者 main.js 中添加以下代碼：

const setHtmlFontSize = () => {
  const htmlDom = document.getElementsByTagName('html')[0];
  let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
  if (htmlWidth >= 750) {
    htmlWidth = 750;
  }
  if (htmlWidth <= 320) {
    htmlWidth = 320;
  }
  htmlDom.style.fontSize = `${htmlWidth / 7.5}px`;
};
window.onresize = setHtmlFontSize;
setHtmlFontSize();

注：這里設(shè)置的比例是 100px = 1rem，例如：元素寬度為 100px 時(shí),可以直接寫成 1rem

方法二

使用 lib-flexible 和 px2rem-loader 自動(dòng)轉(zhuǎn)換

1.安裝插件

npm install lib-flexible --save
npm install px2rem-loader --save-dev

2.配置插件

在入口文件 main.js 中引入 lib-flexible：

引入 lib-flexible

在 build/utils.js 文件中配置 px2rem-loader：

配置 px2rem-loader

安裝并配置好 lib-flexible 和 px2rem 之后要重啟一下項(xiàng)目，才能自動(dòng)把 px 轉(zhuǎn)換成 rem。內(nèi)聯(lián)的 px 樣式不能自動(dòng)轉(zhuǎn)換。

另外，px 寫法上會(huì)有些不同，大家可以參考 px2rem 官方介紹，下面簡單介紹一下。

1. 直接寫 px，編譯后會(huì)直接轉(zhuǎn)化成 rem；---- 【除下面兩種情況，其他長度用這個(gè)】

2. 在 px 后面添加 /*no*/，不會(huì)轉(zhuǎn)化 px，會(huì)原樣輸出； ---- 【一般 border 用這個(gè)】

3. 在 px 后面添加 /*px*/，會(huì)根據(jù) dpr 的不同，生成三套代碼。---- 【一般 font-size 用這個(gè)】

示例代碼如下：

/* 編譯前 */
.selector {
    width: 150px;
    height: 64px; /*px*/
    font-size: 28px; /*px*/
    border: 1px solid #ddd; /*no*/
}
/* 編譯后 */
.selector {
    width: 2rem;
    border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
    height: 32px;
    font-size: 14px;
}
[data-dpr="2"] .selector {
    height: 64px;
    font-size: 28px;
}
[data-dpr="3"] .selector {
    height: 96px;
    font-size: 42px;
}

vue項(xiàng)目使用rem布局響應(yīng)式布局

1、安裝postcss-px2rem及px2rem-loader

npm install postcss-px2rem px2rem-loader --save

2、在根目錄src中新建util目錄下新建rem.js等比適配文件

// rem等比適配配置文件
// 基準(zhǔn)大小
const baseSize = 16
// 設(shè)置 rem 函數(shù)
function setRem () {
? // 當(dāng)前頁面寬度相對(duì)于 1920寬的縮放比例，可根據(jù)自己需要修改。
? const scale = document.documentElement.clientWidth / 1920
? // 設(shè)置頁面根節(jié)點(diǎn)字體大?。ā癕ath.min(scale, 2)” 指最高放大比例為2，可根據(jù)實(shí)際業(yè)務(wù)需求調(diào)整）
? document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改變窗口大小時(shí)重新設(shè)置 rem
window.onresize = function () {
? setRem()
}

3、在main.js中引入適配文件

import './util/rem'

4、到vue.config.js中配置插件

// 引入等比適配插件
const px2rem = require('postcss-px2rem')
// 配置基本大小
const postcss = px2rem({
? // 基準(zhǔn)大小 baseSize，需要和rem.js中相同
? remUnit: 16
})
// 使用等比適配插件
module.exports = {
? lintOnSave: true,
? css: {
? ? loaderOptions: {
? ? ? postcss: {
? ? ? ? plugins: [
? ? ? ? ? postcss
? ? ? ? ]
? ? ? }
? ? }
? }
}