亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在vue移動端項目中使用rem

如何在vue移動端項目中使用rem

千萬里不及你 2018-09-24 10:13:45
以前項目中動態控制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(設置圖的像素大小)做到動態控制了


查看完整回答
反對 回復 2018-09-24
  • 1 回答
  • 0 關注
  • 2289 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號