1.背景介紹
我們?yōu)槭裁匆x擇合適的網(wǎng)頁(yè)設(shè)計(jì)單位
隨著Web的發(fā)展老赤，對(duì)新的解決方案的需求也會(huì)繼續(xù)增大轮洋，對(duì)網(wǎng)頁(yè)的要求更高。
網(wǎng)頁(yè)設(shè)計(jì)單位是涉及到我們布局的效果抬旺，使用不同的單位會(huì)對(duì)最終的demo弊予，會(huì)有影響。
現(xiàn)在都是要求響應(yīng)式設(shè)計(jì)开财，需要適配各種設(shè)備汉柒，電腦，手機(jī)责鳍，平板碾褂。如果單位不合適，可能在這個(gè)設(shè)備顯示良好历葛，那個(gè)設(shè)備就會(huì)打亂布局正塌。
所以需要我們選擇合適的單位來(lái)進(jìn)行開(kāi)發(fā)，設(shè)計(jì)。
2.知識(shí)剖析
1传货、px
px就是pixel的縮寫(xiě)屎鳍，意為像素。px就是設(shè)備或者圖片最小的一個(gè)點(diǎn)问裕，比如常常聽(tīng)到的電腦像素是1024x768的逮壁，表示的是水平方向是1024個(gè)像素點(diǎn)，垂直方向是768個(gè)像素點(diǎn)粮宛。
是我們網(wǎng)頁(yè)設(shè)計(jì)常用的單位窥淆，也是基本單位。通過(guò)px可以設(shè)置固定的布局或者元素大小巍杈，缺點(diǎn)是沒(méi)有彈性忧饭。
特點(diǎn)是1. em的值并不是固定的； 2. em會(huì)繼承父級(jí)元素的字體大小筷畦。
2词裤、em
參考物是父元素的font-size，具有繼承的特點(diǎn)鳖宾。如果自身定義了font-size按自身來(lái)計(jì)算（瀏覽器默認(rèn)字體是16px）吼砂，整個(gè)頁(yè)面內(nèi)1em不是一個(gè)固定的值。
特點(diǎn)是1. em的值并不是固定的鼎文； 2. em會(huì)繼承父級(jí)元素的字體大小渔肩。
3、rem
rem是相對(duì)于根元素html拇惋，這樣就意味著周偎，我們只需要在根元素確定一個(gè)參考值，可以設(shè)計(jì)HTML為大小為10px撑帖，到時(shí)設(shè)置1.2rem就是12px.以此類(lèi)推蓉坎。
優(yōu)點(diǎn)是，只需要設(shè)置根目錄的大小就可以把整個(gè)頁(yè)面的成比例的調(diào)好胡嘿。
4袍嬉、%
一般來(lái)說(shuō)就是相對(duì)于父元素的，
1灶平、對(duì)于普通定位元素就是我們理解的父元素 2伺通、對(duì)于position: absolute;的元素是相對(duì)于已定位的父元素 3、對(duì)于position: fixed;的元素是相對(duì)于ViewPort（可視窗口）逢享，
5罐监、vw
css3新單位，view width的簡(jiǎn)寫(xiě)瞒爬，是指可視窗口的寬度弓柱。假如寬度是1200px的話(huà)沟堡。那10vw就是120px
舉個(gè)例子：瀏覽器寬度1200px, 1 vw = 1200px/100 = 12 px。
6矢空、vh
css3新單位航罗，view height的簡(jiǎn)寫(xiě)，是指可視窗口的高度屁药。假如高度是1200px的話(huà)粥血。那10vh就是120px
舉個(gè)例子：瀏覽器高度900px, 1 vh = 900px/100 = 9 px。
7酿箭、vm
css3新單位复亏，相對(duì)于視口的寬度或高度中較小的那個(gè)。其中最小的那個(gè)被均分為100單位的vm 舉個(gè)例子：瀏覽器高度900px缭嫡，寬度1200px缔御，取最小的瀏覽器高度，1 vm = 900px/100 = 9 px妇蛀。
兼容性太差 耕突，現(xiàn)在基本上沒(méi)人用，我試了一下Chrome就用不了评架。
3.常見(jiàn)問(wèn)題
假如使用em來(lái)設(shè)置文字大小要注意什么眷茁？
4.解決方案
注意父元素的字體大小，因?yàn)閑m是根據(jù)父元素的大小來(lái)設(shè)置的古程。比如同樣是1.5em蔼卡，要是父元素是20喊崖，那1.5em就是30px.要是父元素是30px,1.5em就是45px.
特別是在多重div嵌套里面更要注意挣磨。
5.擴(kuò)展思考
css還有哪些長(zhǎng)度單位？
in:寸
cm:厘米
mm:毫米
t:point荤懂，大約1/72寸
pc:pica茁裙，大約6pt，1/6寸
6.更多問(wèn)題
1.pc pt ch一般用在什么場(chǎng)景?
這些我們網(wǎng)頁(yè)設(shè)計(jì)基本上用不到节仿，在排版上會(huì)有用處晤锥。
2.如何使 1rem=10px
在設(shè)置HTML{font-size：62.5%；}即可
3.如果父元素沒(méi)有指定高度廊宪，那么子元素的百分比的高度是多少矾瘾？
會(huì)按照子元素的實(shí)際高度，設(shè)置百分比已經(jīng)沒(méi)有效果了箭启。
技能樹(shù).IT修真院
“我們相信人人都可以成為一個(gè)工程師壕翩，現(xiàn)在開(kāi)始，找個(gè)師兄傅寡，帶你入門(mén)放妈，掌控自己學(xué)習(xí)的節(jié)奏北救，學(xué)習(xí)的路上不再迷茫”芜抒。
這里是技能樹(shù).IT修真院珍策，成千上萬(wàn)的師兄在這里找到了自己的學(xué)習(xí)路線(xiàn)，學(xué)習(xí)透明化宅倒，成長(zhǎng)可見(jiàn)化攘宙，師兄1對(duì)1免費(fèi)指導(dǎo)。
快來(lái)與我一起學(xué)習(xí)吧~
