做前端的應該對em不陌生，不是什麼罕見的單位，是相對單位，
這種技術需要乙個參考點，一般都是以的「font-size」為基準。比如說我們使用「1em」等於「10px」來改變預設值「1em=16px」，這樣一來，我們設定字型大小相當於「14px」時，只需要將其值設定為「1.4em」。前端開發的前輩們總結了乙個經驗
body
百分比相信大家更不會陌生了，百分比一般寬泛的講是相對于父元素，但是並不是十分準確。
1、對於普通定位元素就是我們理解的父元素
2、對於position: absolute;的元素是相對於已定位的父元素（offset parent）
3、對於position: fixed;的元素是相對於 viewport
viewport：可視視窗，也就是瀏覽器的window那麼大。
例外情況
1、使用了padding、margin 等，實際百分比和你想要的百分比是有區別的。（關於這個，解決方法之一，就是我們可以使用css3的calc()屬性，具體，您請繼續往下看，在文章最後我會解釋。）
2、line-height百分比的一些情況，通常結果是百分比 計算後的值。（關於這個，您請繼續往下看。。。）
rem是相對於根元素的「font-size」為基準。比如說我們給html設定font-size為100px，
那麼我們要給html中的p標籤設定16px的字型，font-size設定.16rem就可以，在這裡16px=.16rem。
這個單位與em有什麼區別呢？
區別在於使用rem為元素設定字型大小時，仍然是相對大小，但相對的只是html根元素。這個單位可謂集相對大小和絕對大小的優點於一身，通過它既可以做到只修改根元素就成比例地調整所有字型大小，又可以避免字型大小逐層復合的連鎖反應。目前，除了ie8及更早版本外，所有瀏覽器均已支援rem。對於不支援它的瀏覽器，應對方法也很簡單，就是多寫乙個絕對單位的宣告。這些瀏覽器會忽略用rem設定的字型大小。
rem支援ie9及以上，意思是相對於根元素html（網頁），不會像em那樣，依賴於父元素的字型大小，而造成混亂。使用起來安全了很多。
html
body
h1
ie10＋ 和現代瀏覽器都支援這兩個單位。
vw viewport寬度，1vw等於viewport寬度的1%
vh viewport高度，1vh等於viewport高的的1%
vw和vh會隨著viewport變化自動變化，再也不用js控制全屏了。
甚至有些人喪心病狂的字型大小都用vw和vh控制，來達到字型和viewport大小同步的效果。
ie10+ 和現代瀏覽器都已經支援vmin
webkit瀏覽器之前不支援vmax，新版已經支援，所有現代瀏覽器已經支援，但是ie全部不支援vmax
vmin vw和vh中比較小的值
vmax vw和vh中比較大的值
這兩個屬性也會隨著viewport變化
ie9+ 和現代瀏覽器都已經支援,這兩個單位時根據當前font-family的相對單位。
ch 字元0的寬度
ex 小寫字元x的高度
當font-family改變的時候這兩個單位的值也會變化，不同字型表現的樣式不一樣。
第二部分移動h5開發入門知識：css3的新單位演算法上面我們已經提到了calc()，下面我們就具體說一說吧！
瀏覽器支援ie9+、ff4.0+、chrome19+、safari6+
calc()語法非常簡單，就像我們小時候學加 （+）、減（-）、乘（*）、除（/）一樣，使用數學表示式來表示：
.haorooms
例如，我們margin是20px。那麼我們就可以寫成
.haorooms
.box
現在就說一下行高帶單位和不帶單位的區別，例如下面的例子：
line-height:26px; 表示行高為26個畫素
line-heigth:120%;表示行高為當前字型大小的120%
line-height:2.6em; 表示行高為當前字型大小的2.6倍
line-height:2.6;表示行高為當前字型大小的2.6倍
希望以上的這些移動h5開發入門知識點，對各位的h5前端開發學習有一定的幫助.
移動端h5開發基礎
移動端h5開發基礎知識 一.手機端開發頁面必須要加一段 注 這段 的主要意思是 讓頁面寬度等於裝置寬度，縮放比例為1，禁止使用者縮放。用於檢測視口，主要的效果就是取消下面的滾動條，讓頁面適應螢幕。二.為自己的頁面設定最大寬度和最小寬度 主要作用是在螢幕足夠大的時候，頁面也不會失真。三.相容手機螢幕大...
h5移動端css開發總結
font size 12px transform scale 10 12 需要注意這個方式雖然縮小了字型，但該文字元素所佔據的原寬高大小並不會跟著縮小，所以很多時候還需要考慮文字位置和間距的問題。一般文字位置需要結合 transform origin 屬性來設定。例如設定文字水平居左 垂直居中 tr...
移動端 h5 開發筆記
1.禁止縮放 禁止快取 2.webkit 定製css 更多參考 webkit touch callout none webkit user select none webkit text size adjust none webkit tap highlight color rgba 0,0,0,1...