020-85201717 / 13725302004
關(guān)于長(zhǎng)度單位，你還只是會(huì)使用px嗎？讓我們來(lái)看看如何使用長(zhǎng)度單位在頁(yè)面自適應(yīng)。
長(zhǎng)度單位分絕對(duì)長(zhǎng)度單位和相對(duì)長(zhǎng)度單位。 絕對(duì)長(zhǎng)度單位是一個(gè)固定的值，它反應(yīng)一個(gè)真實(shí)的物理尺寸，絕對(duì)長(zhǎng)度單位視輸出介質(zhì)而定，不依賴于環(huán)境（顯示器、分辨率、操作系統(tǒng)等）。 而相對(duì)長(zhǎng)度單位，你看相對(duì)二字就可以看出其長(zhǎng)度單位他會(huì)有一個(gè)參考值，會(huì)隨著它的參考值變化，是一種動(dòng)態(tài)的長(zhǎng)度單位，更適合適配不同場(chǎng)景應(yīng)用。
常用的相對(duì)長(zhǎng)度單位
px（像素）
像素是最常用的單位，很多長(zhǎng)度單位最終都映射成像素，這是顯示屏顯示內(nèi)容的基本單位，顯示效果與顯示分辨率有關(guān) 像素為影視顯示的基本單位，譯自英文 pixel，pix 是英文單詞 picture 的常用縮寫，加上英語(yǔ)單詞 element 元素，就得到 pixel，故像素表示 “畫像元素” 之意，有時(shí)又被稱為 pel （picture element）。 通常說(shuō)的顯示分辨率，其實(shí)是桌面設(shè)定的分辨率（桌面分辨率）而不是顯示屏最大可支持的分辨率（物理分辨率）。 列如有一個(gè)寬為 100px 的 div標(biāo)簽，在800x600分辨率下占顯示面積的1/8，而在1980x1080分辨率下則占據(jù)1/19，這也是為什么說(shuō)它是動(dòng)態(tài)的主要原因。 簡(jiǎn)單來(lái)說(shuō)，px會(huì)隨著桌面分辨率的變大變小和改變，參考點(diǎn)就是桌面分辨率，在不同桌面分辨率下會(huì)顯示出不同的效果。目前而已比較流行的還是1920x1080桌面分辨率。
em（相對(duì)于父親）
單位 em 的含義最初是指基于當(dāng)前字體大寫字幕 M 的尺寸。現(xiàn)代瀏覽器中，1em 等于 16px。 基于當(dāng)前元素的 font-size 大小，如果沒(méi)設(shè)置就是繼承父元素的 font-size。 如果作用于 font-size 時(shí)，1em 就等于父元素的 font-size。 em 單位具有級(jí)聯(lián)關(guān)系。 em 會(huì)隨著 font-size 的大小改變而改變。
rem （相對(duì)根元素）
相對(duì)于根元素（html）的 font-size 的計(jì)算值 默認(rèn)情況下：1rem=16px，這是因?yàn)闉g覽器的默認(rèn)字體大小為 16px，且<html>標(biāo)簽的的字體大小不會(huì)被輕易修改。 %（百分比） % 百分比對(duì)于 font-size，line-height 等屬性，基于其父元素的 font-size 大小。而對(duì)于 text-indent、margin、padding、width等屬性則是基于父元素的寬度。
vw（viewpoint width ? 視窗寬度）
CSS 中有一些用于調(diào)整與視圖（瀏覽器頁(yè)面）大小的單位，這些響應(yīng)式設(shè)計(jì)對(duì)于設(shè)計(jì)在不同尺寸屏幕下的網(wǎng)頁(yè)有很大幫助。 一個(gè)單位是指視圖寬度的 1%。
vh（viewpoint height ? 視窗高度）
一個(gè)單位是指視圖高度的 1%。
版權(quán)所有：廣州騰虎網(wǎng)絡(luò)科技有限公司
粵ICP備13073147號(hào) 
