轉(zhuǎn)載
1.背景介紹
????我們?yōu)槭裁匆x擇合適的網(wǎng)頁設(shè)計單位
????隨著Web的發(fā)展堪澎，對新的解決方案的需求也會繼續(xù)增大擂错，對網(wǎng)頁的要求更高。
????網(wǎng)頁設(shè)計單位是涉及到我們布局的效果樱蛤，使用不同的單位會對最終的demo钮呀，會有影響。
????現(xiàn)在都是要求響應(yīng)式設(shè)計昨凡，需要適配各種設(shè)備爽醋，電腦，手機(jī)便脊，平板蚂四。如果單位不合適，可能在這個設(shè)備顯示良好哪痰，那個設(shè)備就會打亂布局遂赠。
????所以需要我們選擇合適的單位來進(jìn)行開發(fā)，設(shè)計晌杰。
2.知識剖析
????1跷睦、px
????????px就是pixel的縮寫，意為像素肋演。px就是設(shè)備或者圖片最小的一個點抑诸，比如常常聽到的電腦像素是1024x768的，表示的是水平方向是1024個像素點惋啃，垂直方向是768個像素點哼鬓。
????????是我們網(wǎng)頁設(shè)計常用的單位监右，也是基本單位边灭。通過px可以設(shè)置固定的布局或者元素大小，缺點是沒有彈性健盒。
????????特點是1. em的值并不是固定的绒瘦； 2. em會繼承父級元素的字體大小称簿。
2、em
????????參考物是父元素的font-size惰帽，具有繼承的特點憨降。如果自身定義了font-size按自身來計算（瀏覽器默認(rèn)字體是16px），整個頁面內(nèi)1em不是一個固定的值该酗。
? ? ? ? 特點是1. em的值并不是固定的授药； 2. em會繼承父級元素的字體大小。
3呜魄、rem
????????rem是相對于根元素html悔叽，這樣就意味著，我們只需要在根元素確定一個參考值爵嗅，可以設(shè)計HTML為大小為10px娇澎，到時設(shè)置1.2rem就是12px.以此類推。
????????優(yōu)點是睹晒，只需要設(shè)置根目錄的大小就可以把整個頁面的成比例的調(diào)好趟庄。
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稠腊。
????????兼容性太差 ，現(xiàn)在基本上沒人用鸣哀，我試了一下Chrome就用不了架忌。
3.常見問題
????????假如使用em來設(shè)置文字大小要注意什么？
????解決方案
????????注意父元素的字體大小我衬，因為em是根據(jù)父元素的大小來設(shè)置的叹放。比如同樣是1.5em，要是父元素是20挠羔，那1.5em就是30px.要是父元素是30px,1.5em就是45px.
????????特別是在多重div嵌套里面更要注意许昨。??
4.擴(kuò)展思考
????????css還有哪些長度單位？
????????in:寸
????????cm:厘米
????????mm:毫米
????????t:point褥赊，大約1/72寸
????????pc:pica糕档，大約6pt，1/6寸? ?
5.更多問題
????1.pc pt ch一般用在什么場景?
????????????這些我們網(wǎng)頁設(shè)計基本上用不到拌喉，在排版上會有用處速那。
? ? 2.如何使 1rem=10px
????????????在設(shè)置HTML{font-size：62.5%；}即可
? ? 3.如果父元素沒有指定高度尿背，那么子元素的百分比的高度是多少端仰？
????????????會按照子元素的實際高度，設(shè)置百分比已經(jīng)沒有效果了田藐。
