UI設(shè)計(jì)CSS網(wǎng)頁基本單位知多少？奇酷教育告訴你

來源：奇酷教育發(fā)表于：2019-10-18 16:47:00

想要成為一名合格的前端工程師，會(huì)寫頁面絕對(duì)不能少，而如果想要頁面寫得出彩，你必須要知道一些網(wǎng)頁常用的基本單位。

　　在傳統(tǒng)的項(xiàng)目開發(fā)中，我們常常會(huì)用到px、%、em這幾個(gè)單位，因?yàn)樗苓m用于大部分的項(xiàng)目開發(fā)，而且擁有比較良好的兼容性。但素，你造嗎？從CSS3開始，瀏覽器對(duì)邏輯單位的支持又提升到了另外一個(gè)境界，增加了rem、vw、vh、vm等一些新的長(zhǎng)度單位，我們可以用這些新的單位開發(fā)出比較良好的響應(yīng)式頁面，以此可以覆蓋多種不同分辨率的設(shè)備，包括移動(dòng)設(shè)備等。

　　那么，接下來我們分別來分析下，這些常用到的單位分別是什么。

　　1．px

　　px就是pixel的縮寫，像素，相對(duì)長(zhǎng)度單位，像素是相對(duì)于顯示器屏幕分辨率而言。比如常常聽到的電腦像素是1024x768的，表示的是水平方向是1024個(gè)像素點(diǎn)，垂直方向是768個(gè)像素點(diǎn)。再比如，px就可以認(rèn)為是一張圖片最小的一個(gè)點(diǎn)，一張位圖就是千千萬萬的這樣的點(diǎn)構(gòu)成的。

　　2.em

　　相對(duì)長(zhǎng)度單位，參考對(duì)象是父元素的font-size，具有繼承的特點(diǎn)，如果當(dāng)前行內(nèi)文本的字體尺寸未被設(shè)置，瀏覽器使用默認(rèn)字體尺寸（16px），整個(gè)頁面內(nèi)1em也不是一個(gè)固定的值。

　　3.%

　　一般寬泛的講是相對(duì)于父元素，但是并不是絕對(duì)的。

　　1）、對(duì)于普通元素就是我們理解的相對(duì)于父元素

　　2）、對(duì)于position: absolute;的元素是相對(duì)于已定位的父元素

　　3）、對(duì)于position: fixed;的元素是相對(duì)于ViewPort（可視窗口）

　　4.rem

　　rem是css3的新單位，相對(duì)于根元素html（網(wǎng)頁）的font-size，不會(huì)像em那樣，依賴于父元素的字體大小，而造成混亂。這個(gè)單位可謂集相對(duì)大小和絕對(duì)大小的優(yōu)點(diǎn)于一身，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。對(duì)于不支持它的瀏覽器，應(yīng)對(duì)方法也很簡(jiǎn)單，就是多寫一個(gè)絕對(duì)單位的聲明。這些瀏覽器會(huì)忽略用rem設(shè)定的字體大小。

　　例如：

　　p{font-size:14px;?font-size:.875rem;}

　　但是，需要注意的是：

　　選擇使用什么字體單位主要由你的項(xiàng)目來決定，如果你的用戶群都使用最新版的瀏覽器，那推薦使用rem，如果要考慮兼容性，那就使用px,或者兩者同時(shí)使用。一般rem用在移動(dòng)端可能更多些。

　　5.vw

　　vw是css3新單位，viewpoint width的縮寫，即視口寬度。何謂視口，就是根據(jù)你瀏覽器窗口的大小的單位，不受顯示器分辨率的影響，是不是很神奇，這就代表了，我們不需要顧慮到現(xiàn)在那么多不同電腦有關(guān)分辨率的自適應(yīng)問題。視口寬度被均分為100單位的vw，1vw等于視窗寬度的1%。

　　舉個(gè)例子：瀏覽器寬度1200px, 1 vw = 1200px/100 = 12 px。和百分比不一樣的是，vw始終相對(duì)于可視窗口的寬度，而百分比和其父元素的寬度有關(guān)。

　　6.vh

　　與vw類似，vh就是可視窗口的高度了。視口高度被均分為100單位的vh，1vh就是高度的1%。看下圖：