rem是一種相對長度單位，參考的基准是<html>標簽定義的font-size。
viewport
做移動端的h5，通常會在HTML文件中指定一個<meta>標簽：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1.0, user-scalable=no">
媒體查詢
手機屏幕的分辨率越來越高，比如iPhone 5為640*1136 px、iPhone 6/6S為750*1334 px。我拿到的UI圖，其參考分辨率為1440*2560 px。
而在寫CSS時，通常是以屏幕寬度為參考的。打開Chrome的響應式設計工具，就可以看到各種設備的屏幕寬度，比如iPhone 5的屏幕寬度是320*568 px，iPhone 6/6S的屏幕寬度為375*667 px。分辨率和屏幕寬度之間，是有一個倍屏系數換算的。
設計師給了一張寬為1440px的UI圖，而做不同設備的適配，就是前端工程師的職責了。
比如UI圖上標注了某個段落的字體大小為64px。為了保證在各種屏幕上的不失真，就要根據實際屏幕寬度做等比例換算，才能寫進CSS，即滿足：
寫入CSS的尺寸/屏幕寬度 = UI圖標注的尺寸/UI圖寬度
因此：
寫入CSS的尺寸 = UI圖標注的尺寸/UI圖寬度*屏幕寬度
比如上例，當標注尺寸為64px、UI圖寬度為1440px時，針對不同屏幕寬度，寫入CSS的屬性分別為： 屏幕寬度320px：font-size: 64/1440*320 = 14.22px 屏幕寬度360px：font-size: 64/1440*360 = 16px 屏幕寬度375px：font-size: 64/1440*375 = 16.67px ... 屏幕寬度1440px：font-size: 64/1440*1440 = 64px
在<html>標簽上只做一次媒體查詢，而在p.intro上使用rem單位。
// 對html做媒體查詢，定義基准的font-size @media (min-width: 320px) { html { font-size: 14.22px; } } @media (min-width: 360px) { html { font-size: 16px; } } @media (min-width: 375px) { html { font-size: 16.67px; } } @media (min-width: 1440px) { html { font-size: 64px; } } // CSS單位使用rem p.intro { font-size: 1rem; }
