網(wǎng)站前端制作之css長度單位

來源： All文章

發(fā)布時間：2023-06-09 11:31:47

　　關(guān)于長度單位，你還只是會使用px嗎？讓我們來看看如何使用長度單位在頁面自適應(yīng)。

長度單位分絕對長度單位和相對長度單位。
- 絕對長度單位是一個固定的值，它反應(yīng)一個真實的物理尺寸，絕對長度單位視輸出介質(zhì)而定，不依賴于環(huán)境（顯示器、分辨率、操作系統(tǒng)等）。
- 而相對長度單位，你看相對二字就可以看出其長度單位他會有一個參考值，會隨著它的參考值變化，是一種動態(tài)的長度單位，更適合適配不同場景應(yīng)用。
常用的相對長度單位

像素是最常用的單位，很多長度單位最終都映射成像素，這是顯示屏顯示內(nèi)容的基本單位，顯示效果與顯示分辨率有關(guān)

　　像素為影視顯示的基本單位，譯自英文pixel，pix是英文單詞picture的常用縮寫，加上英語單詞element元素，就得到pixel，故像素表示畫像元素之意，有時又被稱為pel（pictureelement）。

　　通常說的顯示分辨率，其實是桌面設(shè)定的分辨率（桌面分辨率）而不是顯示屏最大可支持的分辨率（物理分辨率）。

　　列如有一個寬為100px的p標(biāo)簽，在800x600分辨率下占顯示面積的1/8，而在1980x1080分辨率下則占據(jù)1/19，這也是為什么說它是動態(tài)的主要原因。

　　簡單來說，px會隨著桌面分辨率的變大變小和改變，參考點(diǎn)就是桌面分辨率，在不同桌面分辨率下會顯示出不同的效果。目前而已比較流行的還是1920x1080桌面分辨率。

單位em的含義最初是指基于當(dāng)前字體大寫字幕M的尺寸。現(xiàn)代瀏覽器中，1em等于16px。

　　基于當(dāng)前元素的font-size大小，如果沒設(shè)置就是繼承父元素的font-size。

　　如果作用于font-size時，1em就等于父元素的font-size。

　　em單位具有級聯(lián)關(guān)系。

　　em會隨著font-size的大小改變而改變。

相對于根元素（html）的font-size的計算值

　　默認(rèn)情況下：1rem=16px，這是因為瀏覽器的默認(rèn)字體大小為16px，且html標(biāo)簽的的字體大小不會被輕易修改。

%百分比對于font-size，line-height等屬性，基于其父元素的font-size大小。而對于text-indent、margin、padding、width等屬性則是基于父元素的寬度。

CSS中有一些用于調(diào)整與視圖（瀏覽器頁面）大小的單位，這些響應(yīng)式設(shè)計對于設(shè)計在不同尺寸屏幕下的網(wǎng)頁有很大幫助。

　　一個單位是指視圖寬度的1%。

一個單位是指視圖高度的1%。

* 文章來源于網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系客服刪除處理。