移動端rem用法總結

時間 2019-11-13

標籤移動 rem 用法總結欄目無線简体版

原文原文鏈接

先介紹一下這個近年來突起的黑馬html

CSS3中新增的屬性，從IE9開始兼容，手機端都兼容。
參考的是<html>這個標籤的font-size。rem中的r就是root根的意思。
因此rem要比em好用的多，由於em參考的是父親的字號，和rem永遠參考的是根元素（html標籤）的字號。

rem被髮明，其實是爲了作字號的變化方便一點。

中國的前端工程師，發現，rem不單單能夠用來設置字號。還能夠用來設置任何須要長度的地方。好比：
width、height、line-hight、background-size、border-width。

用這個黑馬是能夠作不一樣分辨率的響應式佈局的固然移動端就不要考慮pc了兼容到ipad就能夠了

思路就是全部的單位都用rem來寫無論是div的寬高仍是a標籤的字體大小

假設咱們的移動端psd是按照640的標準來的那麼就設置 html{font-size:20px}

再去把div的寬度和高度由像素所有轉變爲rem 還有字體大小也轉換一下

這只是兼容了一個手機型號或者說640的viewport的佈局那麼更小的或者更大的怎麼辦呢不要着急有兩種辦法來解決看你習慣了

第一種 media出場

html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important; 
    }
}

第二種辦法來了前端

<script>
     (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 = 20 * (clientWidth / 320) + 'px';
            };

          if (!doc.addEventListener) return;
          win.addEventListener(resizeEvt, recalc, false);
          doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
</script>

好了你們趕忙去試試吧若是有什麼問題歡迎留言新手總結歡迎拍板前端工程師