以前項目中動態控制html的字體大小, 讓頁面元素自適應不同機型的屏幕,請教:用vue怎么實現這一功能,或者有其他什么好插件也期待您的推薦在線等 多謝
1 回答

慕妹3242003
TA貢獻1824條經驗 獲得超6個贊
在根目錄的index.html
動態設置基礎像素的大小
<script> function setRootFontSize() { /*獲取屏幕的寬度*/ let width = document.documentElement.clientWidth || document.body.clientWidth /*屏幕小于414px會改變基礎像素,大于等于414px的屏幕基礎像素為13px不變*/ if (width < 414) { document.documentElement.style.fontSize = width / 375 * 13 + 'px' }else { document.documentElement.style.fontSize = '13px' } } setRootFontSize() window.addEventListener('resize', function () { setRootFontSize() }, false)</script>
在scss
文件中寫一個mixin
函數
/*將px轉換成rem*/ @function px2rem($px) { @return $px / 13 + rem; }
將文件寫成公共的樣式文件,或者用的時候引入
以上做完
直接使用px2rem(設置圖的像素大小)
做到動態控制了
添加回答
舉報
0/150
提交
取消