1.背景介紹


我們為什麼要選擇合適的網頁設計單位


隨著Web的發展，對新的解決方案的需求也會繼續增大，對網頁的要求更高。


網頁設計單位是涉及到我們佈局的效果，使用不同的單位會對最終的demo，會有影響。


現在都是要求響應式設計，需要適配各種裝置，電腦，手機，平板。如果單位不合適，可能在這個裝置顯示良好，那個裝置就會打亂佈局。


所以需要我們選擇合適的單位來進行開發，設計。
2.知識剖析


1、px


px就是pixel的縮寫，意為畫素。px就是裝置或者圖片最小的一個點，比如常常聽到的電腦畫素是1024x768的，表示的是水平方向是1024個畫素點，垂直方向是768個畫素點。


是我們網頁設計常用的單位，也是基本單位。通過px可以設定固定的佈局或者元素大小，缺點是沒有彈性。


特點是1. em的值並不是固定的； 2. em會繼承父級元素的字型大小。




2、em


參考物是父元素的font-size，具有繼承的特點。如果自身定義了font-size按自身來計算（瀏覽器預設字型是16px），整個頁面內1em不是一個固定的值。
特點是1. em的值並不是固定的； 2. em會繼承父級元素的字型大小。
3、rem


rem是相對於根元素html，這樣就意味著，我們只需要在根元素確定一個參考值，可以設計HTML為大小為10px，到時設定1.2rem就是12px.以此類推。


優點是，只需要設定根目錄的大小就可以把整個頁面的成比例的調好。


4、%


一般來說就是相對於父元素的，


1、對於普通定位元素就是我們理解的父元素 2、對於position: absolute;的元素是相對於已定位的父元素 3、對於position: fixed;的元素是相對於ViewPort（可視視窗），
5、vw


css3新單位，view width的簡寫，是指可視視窗的寬度。假如寬度是1200px的話。那10vw就是120px


舉個例子：瀏覽器寬度1200px, 1 vw = 1200px/100 = 12 px。


6、vh


css3新單位，view height的簡寫，是指可視視窗的高度。假如高度是1200px的話。那10vh就是120px


舉個例子：瀏覽器高度900px, 1 vh = 900px/100 = 9 px。


7、vm


css3新單位，相對於視口的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vm 舉個例子：瀏覽器高度900px，寬度1200px，取最小的瀏覽器高度，1 vm = 900px/100 = 9 px。


相容性太差 ，現在基本上沒人用，我試了一下Chrome就用不了。


3.常見問題


假如使用em來設定文字大小要注意什麼？


4.解決方案


注意父元素的字型大小，因為em是根據父元素的大小來設定的。比如同樣是1.5em，要是父元素是20，那1.5em就是30px.要是父元素是30px,1.5em就是45px.


特別是在多重div巢狀裡面更要注意。


5.擴充套件思考


css還有哪些長度單位？


in:寸


cm:釐米


mm:毫米


t:point，大約1/72寸


pc:pica，大約6pt，1/6寸


6.更多問題
1.pc pt ch一般用在什麼場景?
這些我們網頁設計基本上用不到，在排版上會有用處。


2.如何使 1rem=10px
在設定HTML{font-size：62.5%；}即可


3.如果父元素沒有指定高度，那麼子元素的百分比的高度是多少？
會按照子元素的實際高度，設定百分比已經沒有效果了。


技能樹.IT修真院
“我們相信人人都可以成為一個工程師，現在開始，找個師兄，帶你入門，掌控自己學習的節奏，學習的路上不再迷茫”。




這裡是技能樹.IT修真院，成千上萬的師兄在這裡找到了自己的學習路線，學習透明化，成長可見化，師兄1對1免費指導。


快來與我一起學習吧~


http://www.jnshu.com/login/1/14303208