新建font.js文件，寫入以下代碼

export function fontSize(res) {let docEl = document.documentElement,clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;if (!clientWidth) return;let fontSize = 100 * (clientWidth / 750);//這里的750是指屏幕的寬度，看設計稿自行更換return res * fontSize; } export default {fontSize, };

在main.js里引入并使用

import fontSize from "./assets/js/font.js"; Vue.prototype.$fontSize = fontSize;

使用時動態(tài)綁定內聯(lián)樣式，給變量使用這個js賦值
我以一個進度條的寬度舉例

<h3 :style="font-size:qwe"></h3>data(){return{qwe:0} }mounted() {this.qwe=this.$fontSize.fontSize(0.24) }

會vue的應該能看懂…不具體寫了，這時就給 h3 這個標簽賦值 24px，在頁面上顯示時會和使用了 px2rem 是一樣的效果，自動轉成 rem 單位

??????完結散花??????

Written ?? sywdebug.

總結

以上是生活随笔為你收集整理的使用fontSize做内联样式的自适应的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。