rem布局原理：使用js動態(tài)改變html的字體大小+rem的特性，來保證最初的設(shè)計圖中每個元素的尺寸比例不變，以適用于不同尺寸的設(shè)備能夠正常顯示。

(function?(doc,?win)?{

var?docEl?=?doc.documentElement,

resizeEvt?=?'orientationchange'?in?window???'orientationchange'?:?'resize',

recalc?=?function?()?{

var?clientWidth?=?docEl.clientWidth;

if?(!clientWidth)?return;

docEl.style.fontSize?=?50?*?(clientWidth?/?375)?+?'px';

console.log(docEl.style.fontSize)

};

if?(!doc.addEventListener)?return;

win.addEventListener(resizeEvt,?recalc,?false);

doc.addEventListener('DOMContentLoaded',?recalc,?false);

})(document,?window);

引用在main.js中

在html是：font-size:50px 對應(yīng)關(guān)系：

在寫頁面的過程中使用屏幕寬度為375px(蘋果6、7、8)的時候，50*(375/375)html字體大小為50px, 也就是根字體50px,?那在設(shè)計搞寬度750px,

如果一個元素寬度為100%的時候就是7.5rem(375px/50px),?在蘋果6、7、8，屏幕寬度為375px應(yīng)該是滿的375px = 7.5rem*50px；

如果設(shè)備寬度是750px的時候，50*(750/375)html字體大小為100px，以此類推成比例增長；

在設(shè)計圖中有一個元素寬度是700px，由上可知html字體大小為100px，那么700px就是700px/100px=7rem、元素寬度為124px那么就是1.24rem；

由于100px好算數(shù)，所以移動端一般把設(shè)計圖寬度縮放到750px再去量每個元素的像素，使用寬度375的設(shè)備寫頁面。

換個方法代碼可以根據(jù)設(shè)計搞和屏幕關(guān)系自動換算：

(function?(doc,?win)?{

var?docEl?=?doc.documentElement,

resizeEvt?=?'orientationchange'?in?window???'orientationchange'?:?'resize',

recalc?=?function?()?{

var?clientWidth?=?docEl.clientWidth;

var?PSDwidth?=?750;//設(shè)計稿寬度

if?(!clientWidth)?return;

docEl.style.fontSize?=?clientWidth?/PSDwidth?*625?+?'%';

//?docEl.style.fontSize?=?100?*?(clientWidth?/?PSDwidth?)?+?'px';

};

if?(!doc.addEventListener)?return;

win.addEventListener(resizeEvt,?recalc,?false);

doc.addEventListener('DOMContentLoaded',?recalc,?false);

})(document,?window);

如果上面的理解起來實在費勁，簡單的辦法，根據(jù)設(shè)計圖寬度去修改公式。

docEl.style.fontSize = 100 * (調(diào)試設(shè)備寬度 / 設(shè)計圖寬度) + 'px';

在寫頁面的過程中保持?調(diào)試設(shè)備寬度等于?設(shè)計圖寬度就可以。

這樣就又可以愉快的使用123px是1.23rem的計算了，

使用rem布局做完之后無論設(shè)備寬度如何改變，內(nèi)容都會等比例的去布置；

總結(jié)

以上是生活随笔為你收集整理的vue中设置html的fontsize,vue中rem布局使用js动态改变fontsize的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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