vue プロジェクトで rem レイアウトを使用する方法

vue プロジェクトで rem レイアウトを使用する方法

シーン:

モバイル プロジェクトの開発では、携帯電話のページ レイアウトを実現するために rem レイアウトを使用する必要があります。

この記事では、vue プロジェクトで rem レイアウトを使用するプロセス全体を詳細に説明しています。注意深く読むことができます!

方法：

(1) lib-flexbile を使用する

(2) postcss-pxtorem を使う

知らせ：

競合を避けるために、2 つの方法のいずれかを選択してください。!!

方法 1: lib-flexible を使用する

1. インストールパッケージ

npm i lib-flexible

2. ファイルのインポート

在main.js（入口）中引入js文件 ---  

import 'lib-flexible/flexible.js'

3. 必要に応じてレムを設定します

在node_modules文件中找flexible设置rem
为了方便可以设置rem为  width / 37.5 
相当于1rem=10px

4.レムを使う

//比如设置p标签字体大小为24px

p {
    
    
	font-size:2.4rem
}

方法 2: postcss-pxtorem を使用する

1. インストールパッケージ

//安装 postcss-pxtorem
npm i postcss-pxtorem -s

2. rem.js ファイルを作成する

src ディレクトリに新しい rem フォルダーを作成し (通常は util フォルダーを作成できます)、新しい rem.js を作成し、次のコードを追加します。

//兼容处理
function setHtml() {
    
    
    //获取设备宽度
    var deviceWidth = document.documentElement.offsetWidth;
    //给html标签设置fontSize，就是给rem赋值
    document.documentElement.style.fontSize = deviceWidth / 375 * 10 + 'px';
}

//窗口大小变化的时候执行
window.onresize = setHtml;
//页面初始加载时也要触发
setHtml();

3. 新しい .postcssrc.js を作成します

プロジェクトのルート ディレクトリに新しい .postcssrc.js を作成し (注.追加することを忘れないでください)、次のようにコードを追加します。

module.exports = {
    
    
 "plugins": {
    
    
 "postcss-pxtorem": {
    
    
  "rootValue": 37.5,
  "propList": ["*"]
 }
 }
}

4. main.js に導入する

注: パスは、作成したフォルダーに基づいています。

import '@/rem/rem.js'

5. 本文のフォントサイズを設定する

html {
    
    
    font-size: 10px;  // 相当于1rem = 10px
}

body {
    
    
    font-size: 16px;
}

6.フローチャートを参照できます

上記は、vue が rem を使用して適応する方法の 2 つの方法です。他の方法を持っている人は、コメント領域で返信してください!