rem你懂了嗎

請說說rem 什麼是rem 爲何要用rem 怎麼用？ 1.rem的就是根元素的字體大小，默認的是1rem=16px;

2.爲何咱們要使用rem,是爲了手機適配；

先說下rem的基本原理，假如蘋果6上我須要寫一個寬32px的div,我就能夠寫上2rem,那麼在蘋果6plus上我要作到自適應確定這個32px就不單單是32px，因此我能夠設置font-size:20px,也就是1rem=20px;那麼我再蘋果6上寫的2rem就變成了40px了。

3一般咱們在meta中設置width=device-width,就是讓咱們寫的css代碼的像素就是咱們實際手機上視覺視口的像素大小一致；例如我寫了寬度是320px;那麼它在蘋果5上展現的寬度就是全屏，由於蘋果5的視覺視口就是320px;

4.可是實際操做上說，咱們要把設計稿的圖變成手機上顯示的，而且還要作到不一樣手機自適應的就要考慮設計稿的單位與css單位的統一還有不一樣手機的設備像素比問題；

5在前端，有設備像素和css像素兩個像素概念，設備像素就是固定的，就是常說的手機分辨率，常見的像ipone5的分辨率是640；6是750；css像素就是css代碼中的像素；

6.說完他們兩個了就要說一下dpr,這個dpr就是設備像素比；就是咱們的手機分辨率除以css像素；像素比它既會被手機分辨率影響，也會被css的縮放影響；

7.先說說手機分辨率的影響方面，先控制縮放比例爲1； 可是不一樣的手機的分辨率是不同的，例如，之前的蘋果手機分辨率是320，他的視覺視口是320，也就是咱們寫的css代碼就是320px,這時候dpr就是1，可是如今像蘋果4，5的分辨率已經達到640了，咱們的視覺視口仍是320，這個時候他的dpr就是2了，又由於通常設計師給咱們的圖是按照分辨率的大小作出來的；例如以蘋果6給的是750px的，他的視覺視口是375，因此設備像素比就是2，咱們在切圖的時候就要除以2才能夠保證正確性；因此咱們要考慮到手機分辨率對效果的影響；

8.上面這個是在縮放比例爲1：1的狀況下按照設備比換算單位，還能夠經過縮放比例來適配， 這樣個人css375px就等於設計稿的750px了；按照這種方法，就考慮到不一樣的設備的像素比不同，例如6plus就是三倍，因此這個方法只適合與2倍的像素比；因此咱們也能夠動態改變縮放；而縮放是1/設備像素比獲得的，經過js動態修改meta標籤保持全部設備的設計稿與視覺視口一致；這樣就解決了咱們的從設計稿到css的單位問題；可是咱們還要考慮不一樣設備的自適應問題；這個時候咱們就能夠用到rem了。我在設計稿上設置rem爲每一個屏幕的1/10，這樣6的750px就是75px,1rem=75px,5就是32px,而後設計稿上量的單位px轉換爲rem就是除以75就能夠了。固然這個咱們能夠經過less編譯計算；編譯後的值在不一樣設備的比例是一致的；

6.還有第二種方法，保持縮放比例爲1； 在設計稿單位問題上： 將蘋果6設計稿的的html的font-size設爲100px;1rem=100px;也就是將750/7.5獲得rem值；那麼在視覺視口下的375px/7.5獲得rem爲50px; 無論什麼設備都將設計稿除以7.5獲得rem;同時保持視覺視口除以7.5獲得rem,這樣同時除以相同的數，他們之間的設備像素比不會改變；

這樣咱們就能夠經過Js動態監聽不一樣設備除以7.5後的rem作到不一樣設備的自適應； 這樣的好處就是咱們在設計稿上的單位就很是好換算了，100px=1rem,測量的像素直接除以100就能夠了；

7這兩種方法，淘寶是先經過縮放來解決手機設備像素比問題，而後經過不一樣屏幕的設計稿寬度/10來進行rem設置。而後動態改變不一樣設備的rem作到自適應；阿里的方法是經過設計稿設置固定fz=100px;以蘋果6爲例，就是750的fz=100px;1rem=100px;在他的視覺視口(375px)下就是fz=50px; 其餘的設備，例如6plus他的設備像素比就是3，可是我把他的分辨率和視覺視口都同時除以7.5換算就能夠解決手機的設備像素比問題了，並且如今你能夠以100的比例換算你從設計稿上測量的像素。例如200px就是2rem就能夠了

document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px'; (function (doc, win) { var docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; function recalc() { var clientWidth = docEl.clientWidth; //alert(docEl.clientHeight) if (!clientWidth) return; clientWidth=clientWidth > 750 ? 750 : clientWidth; docEl.style.fontSize = (clientWidth / 7.5) + 'px'; }; if(!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);