1. 安裝lib-flexible

npm i lib-flexible --save

2. 在main.js里引入lib-flexible

import 'lib-flexible/flexible.js'

3.然后在node_modules文件夾下找到lib-flexible文件夾下的flexible.js

function refreshRem(){var width = docEl.getBoundingClientRect().width;if (width / dpr > 540) {width = 540 * dpr;}var rem = width / 10;docEl.style.fontSize = rem + 'px';flexible.rem = win.rem = rem; } 把上面的函數(shù)注釋掉換成下面這個函數(shù) function refreshRem() {var rem = docEl.clientWidth / 24;docEl.style.fontSize = rem + 'px' }

4.在APP.vue中加入如下代碼(這是適配的屏幕尺寸,根據(jù)項(xiàng)目需求手動更改)

@media screen and (max-width: 1024px) {html {font-size: 42.66px!important;注釋: 1024/24可得} } @media screen and (min-width: 2560px) {html {font-size: 106.66px!important;注釋: 2560/24可得} }

5.安裝插件把頁面寫的px轉(zhuǎn)換成rem

6.最后找到設(shè)置中的擴(kuò)展設(shè)置把font-size改為80即可

?

總結(jié)

以上是生活随笔為你收集整理的前端页面最佳适配方案px转rem(野草蛮生)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。