rem 計算公式

rem 量圖計算公式：

獲取比值：設備尺寸/設計圖尺寸 

例如：設備寬度尺寸為   375px 、設計圖尺寸為750px，計算獲得比值為0.5，量得設計圖上某個圖片元素寬度為 100px，實際在375px寬度的設備上此元素為 100 * 0.5 = 50 px。

故：

設置html 下font-size 默認值為 0.5px，為了計算方便一般會以100倍計算，也就是50px，如下：

@media screen and (min-width:375px) {
    html {
        font-size: 50px;
    }
}

如上，此時在375的設備上 1rem  =  50px，在寫css 的時候設置其寬度為0.5rem即可（.5rem 就等於 50px 的實際設備上的寬度，換算到ui設計圖上，也就是 100px）

img.test_img{
    width : .5rem  
}

 

附上其他網友拷貝的小米官網的寫法：

// 小米官網的寫法!function(n){
　　　// 獲取window的document、dom-ele元素、i（ui設置圖尺寸）、換算比率、監聽對象名（orientationchange ios移動端橫/縱向查看模式，resize 為window窗口尺寸改變事件）、定義方法a（處理html的font-size值）首先獲取當前window的可見寬度，
存在則為320，最大為750像素，也就是說只針對2種尺寸的變化、document對象監聽之前得到的事件名（resize或ios的change）當文檔加載完畢或者重置尺寸的時候重新設置     var  e=n.document,          t=e.documentElement,          i=750,          d=i/100,          o="orientationchange"in n?"orientationchange":"resize",          a=function(){              var n=t.clientWidth||320;n>750&&(n=750);              t.style.fontSize=n/d+"px"          };          e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1)) }(window);