關于長度單位,你還只是會使用px嗎?讓我們來看看如何使用長度單位在頁面自適應。
長度單位分絕對長度單位和相對長度單位。 絕對長度單位是一個固定的值,它反應一個真實的物理尺寸,絕對長度單位視輸出介質而定,不依賴于環境(顯示器、分辨率、操作系統等)。 而相對長度單位,你看相對二字就可以看出其長度單位他會有一個參考值,會隨著它的參考值變化,是一種動態的長度單位,更適合適配不同場景應用。
常用的相對長度單位
px(像素)
像素是最常用的單位,很多長度單位最終都映射成像素,這是顯示屏顯示內容的基本單位,顯示效果與顯示分辨率有關 像素為影視顯示的基本單位,譯自英文 pixel,pix 是英文單詞 picture 的常用縮寫,加上英語單詞 element 元素,就得到 pixel,故像素表示 “畫像元素” 之意,有時又被稱為 pel (picture element)。 通常說的顯示分辨率,其實是桌面設定的分辨率(桌面分辨率)而不是顯示屏最大可支持的分辨率(物理分辨率)。 列如有一個寬為 100px 的 div標簽,在800x600分辨率下占顯示面積的1/8,而在1980x1080分辨率下則占據1/19,這也是為什么說它是動態的主要原因。 簡單來說,px會隨著桌面分辨率的變大變小和改變,參考點就是桌面分辨率,在不同桌面分辨率下會顯示出不同的效果。目前而已比較流行的還是1920x1080桌面分辨率。
em(相對于父親)
單位 em 的含義最初是指基于當前字體大寫字幕 M 的尺寸。現代瀏覽器中,1em 等于 16px。 基于當前元素的 font-size 大小,如果沒設置就是繼承父元素的 font-size。 如果作用于 font-size 時,1em 就等于父元素的 font-size。 em 單位具有級聯關系。 em 會隨著 font-size 的大小改變而改變。
rem (相對根元素)
相對于根元素(html)的 font-size 的計算值 默認情況下:1rem=16px,這是因為瀏覽器的默認字體大小為 16px,且<html>標簽的的字體大小不會被輕易修改。 %(百分比) % 百分比對于 font-size,line-height 等屬性,基于其父元素的 font-size 大小。而對于 text-indent、margin、padding、width等屬性則是基于父元素的寬度。
vw(viewpoint width ? 視窗寬度)
CSS 中有一些用于調整與視圖(瀏覽器頁面)大小的單位,這些響應式設計對于設計在不同尺寸屏幕下的網頁有很大幫助。 一個單位是指視圖寬度的 1%。
vh(viewpoint height ? 視窗高度)
一個單位是指視圖高度的 1%。