一.px,em,rem之間聯絡與區別

px：畫素是相對於顯示器螢幕解析度而言的相對長度單位，不會受螢幕寬度改變

em：繼承父級的font-size，與父級的字型大小有關

rem：是em的升級版，rem只會相對html的值，不會受到父級的影響。

二.移動端怎麼用rem

假設設計師的視覺稿是按照iPhone6的寬度來設計的，即375px
那麼，我們可以完全按照視覺稿上的尺寸來賦值給元素的樣式，比如視覺稿上的尺寸是80px，那麼在css中就可以直接定義width:80px; 頁面中所有的尺寸都這樣來設定。

當所有的網站所有的頁面樣式都設定好之後。

1. 設定頁面的rem大小
```css

html {
font-size: calc(100vw/3.75);
}

或者（ipone6舉例）

html{

font-size:26.67vw;

}

```
100vw是裝置的寬度，除以3.75可以讓1rem的大小在iPhone6下等於100px

2. 替換頁面中的單位，把所有的px單位替換成rem，除以100，比如前面的80px，就是0.8rem
這樣在iPhone6下，所有元素的尺寸還是和視覺稿的尺寸一樣，而iphone5中，因為裝置的寬度變小了，100vw/3.75得到的值，會相應的變小，即rem的單位值會變小，頁面中所有的尺寸會等比例縮放。

這樣就可以做到針對任何解析度的裝置保持視覺一致了。
最後，前面用到vw單位，但是低版本的裝置可能不支援，那麼就需要js來處理一下：
```javascript

document.documentElement.style.fontSize = window.innerWidth/3.75 + 'px'

```

當然，rem也可以用在定寬高等