css 中單位很多  %、px、em、rem，以及比較新的vw、vh等，每個單位都有特定的用途，而我呢，往往不知道什麼時候該用什麼，調重點總結一下

• 使用px，結合Media Query進行階梯式的適配；
• 使用%，按百分比自適應佈局；
• 使用rem，結合html元素的font-size來根據螢幕寬度適配；
• 使用vw、vh，直接根據視口寬高適配。

在這些大前提下，對小的細節做微調。比如使用px的時候，可能在小螢幕中，要對某個容器進行transform:scale(.8)，適當縮小處理。使用rem的時候，需要固定頁面的左右間距為10px等。

開發總結：

1. 在世界稿要求固定尺寸的元素上使用px。比如1px線，4px的圓角邊框。
2. 在字號、（大多數）間距上使用rem。
3. 慎用em。

%、vw、vh都是根據參考物件按比例適配

%是參考父容器，vw和vh是參考視口。

為什麼慎用em?

em會疊加計算。

//HTML
<span>
    abc
    <span>def</span>
    abc
</span>

//CSS
span{font-size:1.5em;}

效果

em的計算原理，它是根據當前元素的字號按比例計算的。

外層span的字號是16px(瀏覽器預設值)，1.5em之後是24px。由於字號是繼承的，導致內部span 的字號繼承過來是24px，再經過1.5em之後就成了36px。

所以，就算要用em的話，儘量不要用在繼承屬性（font-size）上，除非你真的清楚自己在做什麼！

比如你想根據字號自動調整字元間距，可以這麼做：

.content{
    font-size:1rem;
    letter-spacing:.03em;
}

rem VS. px

px的性質決定了它只能用於固定尺寸。

除了固定尺寸用px，其他大部分情況都可以用rem

現在考慮一個實際的開發場景，一般來說都是先有視覺稿才能開發。兩種情況：一、假設視覺稿iPhone 6和iPhone 6+，及其他尺寸各出了一份，那你就按照Media Query去適配。二、設計師只給你一種機型的視覺稿，以iPhone 6為例，750×1334，2倍屏下轉換後是375×667。

第一種情況，通過Media Query斷點適配

第二種，要根據寬度為375px的稿子，擴充套件到適配任意寬度的螢幕

視覺稿如下：

測量後主要引數如下：

• 頁面間距10px
• 文字間距10px，字號16px
• A高度100px
• B高度50px，上間距30px

HTML結構和CSS

<div class="box box-1">A.第一段內容</div>
<div class="box box-2">B.第二段內容</div>

body{
	padding: 10px;
	background-color: #f6f0ee;
}
.box{
	padding: 10px;
	font-size: 16px;
	color: #fff;
	box-sizing: border-box;
}
.box-1{
	height: 100px;
	background-color: #1daedc;
}
.box-2{
	margin-top: 30px;
	height: 50px;
	background-color: #ddbe97;
}

然後視覺開始提要求，大屏上要把字型放大、間距放大。

一個選擇：確認要適配哪種螢幕，字號是多少，間距是多少。技術上再通過Media Query微調

@media(min-width:414px){

}

另一個選擇：首先按rem作為字號，容器高度，外間距的單位。那麼程式碼改為：

html{
	font-size: 16px;
}
body{
	padding: 10px;
	background-color: #f6f0ee;
}
.box{
	padding: 10px;
	font-size: 1rem;
	color: #fff;
	box-sizing: border-box;
}
.box-1{
	height: 6.25rem;
	background-color: #1daedc;
}
.box-2{
	margin-top: 1.875rem;
	height: 3.125rem;
	background-color: #ddbe97;
}

通過Media Query改變iPhone 6+ 的html 字號，其他元素的屬性就會自動變化

@media(min-width:414px){
    html{
        font-size:17.664px;
    }
}

17.664 = 414 * 16 / 375.

由此可以得到html的font-size計算公式為：font-size = deviceWidth * 16 /375;

前提是你的html有這條meta屬性

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,user-scalable=no">

 所以rem 有個明顯的有點，它可以通過少量的程式碼解決大部分問題。

細節問題，用Media Query 微調

關於rem相容性 PC端僅在IE9+支援。vw和vh一樣，如果要考慮IE8相容，那隻能用px。移動端支援

html 的font-size該如何設定

由於（大部分）瀏覽器的預設字號為16px，所以一般來說把html的font-size歸一化為16px是比較合適的實踐方式。

常用的Media Query斷點（以iPhone 6為基準）

@media only screen and (min-width: 320px) {
	html{
		font-size: 13.65px;
	}
}
			
@media only screen and (min-width: 360px) {
	html{
		font-size: 15.36px;
	}
}
			
@media only screen and (min-width: 375px) {
	html{
		font-size: 16px;
	}
}
			
@media only screen and (min-width: 390px) {
	html{
		font-size: 16.64px;
	}
}
			
@media only screen and (min-width: 414px) {
	html{
		font-size: 17.66px;
	}
}
			
@media only screen and (min-width: 640px) {
	html{
		font-size: 27.31px;
	}
}

大家可能還會看到一些文章中建議把html字號設定成62.5%

html{
    font-size:62.5%;
}

因為剛提到瀏覽器預設的字號是16px，因此換算成百分比就是62.5% = 1 / 16

那為什麼要用百分比呢？因為考慮到輔助功能和瀏覽器設定。對於部分使用者，可能會在手機或瀏覽器的設定中增大手機字號，這意味著對方平時看字是很費力的，所以他要放大。那把html的字號設定成百分比就很貼心了，會隨著手機設定改變頁面的字號

但是呢，就算你看到用62.5%的情況，有些間距也是不合理的，都做的不太好，特別是把文案做到圖片上，對字號根本不敏感，所以縮放一定要考慮到位

另外，針對本小節開頭用16px 的情況，這裡在提供一招

用Media Query的缺點是什麼？它是分段函式，對於寬度在[320，360]區間內的螢幕，會適用同一套方案。最完美的應該是線性函式，用vw即可

html{
    font-size:4.266667vw;
}    

用一行程式碼代替之前6個冗長的Media Query，還不錯吧

如何提高rem的可讀性

當你知道html的font-size怎麼設定後，肯定想問，難道我每次寫程式碼時，還得做個除法，把rem計算出來嗎

如果用到CSS預處理，這事情就好辦了，以LESS為例，兩部操作如下

// 1\.按iPhone 6的視覺稿，基準字號為16px,因此可以設定一個LESS變數。
@px:16rem;

//2\.通過LESS內建的除法自動運算。比如用到16px的字號時，寫成16/@px即可，最後會計算成1rem

.example{
    font-size:16/@px;
    margin:20/@px 0;
    padding:20/@px 10/@px;
}

小結

本文介紹了rem的適配方式，如何設定html的font-size，如何更快的書寫rem 的值