移動端：UI圖px單位轉換rem單位的計算方法

標籤：操作   markdown   螢幕   client   字型大小   idt   fun   元素   今天   

簡單說一下 em

em 單位是相對於父元素字型大小來去定的。比方說：

    font-size:12px;    元素寬度是2em;    那麼實際的寬度是 24px.(具體為什麼，可以去查詢資料，今天主講rem)

簡單說一下 rem

rem 是相對於根項目（html）字型大小來確定的。比方說：

            寬度            字型    手機A： 320px            14px    手機B： 460px             ?    為了能達到可以同等比的放大縮小，那麼，可以進行很簡單的運算：?=14*460/320    得到：？=20.125px; 

UI圖上的px轉化成實際操作的rem計算方法

1. 第一步：設計標籤的基準值，隨意，想定多少定多少。隨意定：20px

2. 第二步：看看UI同事給你的圖，寬度是多少？一般UI給圖都是會給大一點，因為大圖切下來，當螢幕小點，不會失真，但是小圖要是放大了，就不太好看了。。。比方說，

   一張圖 寬度749px 高度234px;  你的瀏覽器模擬器以iphone6來定基，也就是寬度為375px;那麼根據等比例縮放，你的模擬器高度為h=375*234/749=117.1562px那麼實際的rem的計算值為：寬度：375/20 = 18.75rem高度: 117.1562/20 = 5.8578rem;

3. 第三步： 開始進行換算。實際是不同螢幕寬度，只要變換根項目的font-size,即可調整所有的元素寬高顯示。而這個，只能通過js來實現

               基準螢幕               真實螢幕寬度          375px               clientWidth字型          20px                ?js代碼：window.onload = function(){    document.documentElement.style.fontSize = 20*document.documentElement.clientWidth/375 + ‘px‘}

4. 第四步：檢驗你的頁面。

題外話

現在有很多可以直接計算rem值的外掛程式，不用你每次寬高都去算一下，不然那樣是會活不下去的。具體實現可以看這篇文章https://www.cnblogs.com/jf-67/p/7171830.html

移動端：UI圖px單位轉換rem單位的計算方法