css 長度單位 詳解

參考：

公司主營業(yè)務(wù)：成都網(wǎng)站設(shè)計、網(wǎng)站制作、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)建站是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)建站推出鎮(zhèn)海免費做網(wǎng)站回饋大家。

開發(fā)中主要用到的是 px、em、%。在css3中的vw、vh使用也慢慢多了起來。

相對于當(dāng)前DOM元素的font-size。

如果設(shè)置當(dāng)前元素的font-size為0.75em，而其父元素的font-size是16px時，則當(dāng)前元素的font-size是0.75 * 16px = 12px;

如果設(shè)置當(dāng)前元素的width是10em，而當(dāng)前元素的font-size是16px（無論是繼承自父容器還是設(shè)置的）時，則當(dāng)前元素的width是10 * 16px = 160px;

注意1：任意瀏覽器的默認(rèn)字體高都是16px，如果給body元素的font-size設(shè)置為62.5%，那body的font-size實際大小是 16px*62.5%=10px，如果所有子元素都以該字體大小使用em作為尺寸單位，相當(dāng)于1em=10px，這樣設(shè)置em就非常簡單，只要將實際px數(shù)值除以10，就是em單位值。

注意2：em相對于px的值并不是固定的，是會隨著父元素或者當(dāng)前元素的font-size不同而變化

em是CSS3新增的一個相對單位（root em，根em），相對于根節(jié)點(一般為html節(jié)點)的font-size，如果html節(jié)點設(shè)置font-size = 100px，那么文檔中的元素設(shè)置為0.3rem，則計算為：0.3 * 100px = 30px。

這個單位與em有什么區(qū)別呢？區(qū)別在于使用rem為元素設(shè)定字體大小時，仍然是相對大小，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優(yōu)點于一身，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。

目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。對于不支持它的瀏覽器，應(yīng)對方法也很簡單，就是多寫一個絕對單位的聲明（通過下邊樣式覆蓋上邊樣式原理），這些瀏覽器會忽略用rem設(shè)定的字體大小

相對于父元素的長度高度。

注意1：position:fixed時，無論當(dāng)前元素放在哪里，將相對于窗口寬度。

注意2：position:absolute時，將相對于其相對的元素寬度（遞歸父元素直到第一個設(shè)置了position的元素）。

CSS3新增樣式，部分瀏覽器（IE8）不支持。

vh、vw：相對于視窗（Viewport）的高度和寬度，而不是父元素的(CSS百分比是相對于包含它的最近的父元素的高度和寬度)。

1vh 等于1/100的視窗高度，1vw 等于1/100的視窗寬度。

視窗:是指瀏覽器內(nèi)部的可視區(qū)域大小，即window.innerWidth/window.innerHeight大小，不包含任務(wù)欄標(biāo)題欄以及底部工具欄的瀏覽器區(qū)域大小

CSS3新增樣式，部分瀏覽器（IE8）不支持。

vmin：取視窗高度和寬度的最小值作為基準(zhǔn)。

vmax：取視窗高度和寬度的最大值作為基準(zhǔn)。

例如：瀏覽器視窗大小為 window.innerWidth=1000px，window.innerHeight=800px，那么，1vmin=800px/100=8px; 1vmax=1000px/100=10px。

使用場景：做移動頁面開發(fā)時，如果使用 vw、wh 設(shè)置字體大?。ū热?5vw），在豎屏和橫屏狀態(tài)下顯示的字體大小是不一樣的。由于 vmin 和 vmax 是當(dāng)前較小的 vw 和 vh 和當(dāng)前較大的 vw 和 vh。這里就可以用到 vmin 和 vmax。使得文字大小在橫豎屏下保持一致

px是固定的像素，一旦設(shè)置了就無法因為適應(yīng)頁面大小而改變。

em和rem相對于px更具有靈活性，他們是相對長度單位，意思是長度不是定死了的，更適用于響應(yīng)式布局。

對于em和rem的區(qū)別一句話概括：em相對于父元素，rem相對于根元素。

rem中的r意思是root（根源），這也就不難理解了。

% 是相對于父元素的大小設(shè)定的比率，vw、vh 是視窗大小決定的。

vw、vh 優(yōu)勢在于能夠直接獲取高度，而用 % 在沒有設(shè)置 body 高度的情況下，是無法正確獲得可視區(qū)域的高度的，所以這是挺不錯的優(yōu)勢。

做移動頁面開發(fā)時，如果使用 vw、wh 設(shè)置字體大?。ū热?5vw），在豎屏和橫屏狀態(tài)下顯示的字體大小是不一樣的。

由于 vmin 和 vmax 是當(dāng)前較小的 vw 和 vh 和當(dāng)前較大的 vw 和 vh。這里就可以用到 vmin 和 vmax。使得文字大小在橫豎屏下保持一致。

12.CSS布局篇之響應(yīng)式——vw/vh

網(wǎng)頁視口尺寸

window.screen.height //屏幕高度，667

window.innerHeight //網(wǎng)頁視口高度，553

document.body.clientHeight //body高度，網(wǎng)頁內(nèi)容的高度根據(jù)網(wǎng)頁內(nèi)容決定

vh網(wǎng)頁視口高度的1/100

vw網(wǎng)頁視口寬度1/100

vmax取兩者（vh/vw）最大值

vmin取兩者（vh/vw）最小值

css3中vh和vw分別是什么意思？

1.因此html5和css3引入視口的概念來代替顯示器的物理尺寸。通過在meta標(biāo)簽上的設(shè)置，視口的長寬可以跟設(shè)備的物理分辨率相等，也可以不相等（以便手機上可以實現(xiàn)用兩個手指來放大會縮小頁面），可根據(jù)需要靈活掌握。在PC中，視口的長寬則是跟瀏覽器窗口的物理分辨率恒等的。

2.1vw等于視口寬度（viewport width）的百分之一，也就是說100vw就是視口的寬度。同理，1vh等于視30px改成5vw，意思就是窗口寬度的5%，同理10vw。

3.不過由于vw和vh是css3才支持的長度單位，所以在不支持css3的瀏覽器中是無效的口高度（viewport height）的百分之一。

css使用vw單位怎么有什么好的計算方法嗎

100vw就是百分百的屏幕寬度，1vw就是1%的屏幕寬度，這個難道還需要計算嗎？

css3中vh和vw是什么意思

vw和vh是相對于視口（viewport，也可以叫做視區(qū)、視界或可視范圍）的寬度和高度。由于現(xiàn)在移動設(shè)備（主要是手機）的屏幕尺寸千差萬別，如果仍然根據(jù)屏幕的物理分辨率來設(shè)計網(wǎng)頁，效果會很難統(tǒng)一，因此html5和css3引入視口的概念來代替顯示器的物理尺寸。通過在meta標(biāo)簽上的設(shè)置，視口的長寬可以跟設(shè)備的物理分辨率相等，也可以不相等（以便手機上可以實現(xiàn)用兩個手指來放大會縮小頁面），可根據(jù)需要靈活掌握。在PC中，視口的長寬則是跟瀏覽器窗口的物理分辨率恒等的。

1vw等于視口寬度（viewport width）的百分之一，也就是說100vw就是視口的寬度。同理，1vh等于視口高度（viewport height）的百分之一。

css單位 px，百分比，rem，em，vw和vh 區(qū)分

有兩種類型的長度單位：相對和絕對

px就是pixel（像素）的縮寫，絕對單位，相對長度單位，相對于屏幕分辨率。

em是相對單位 ，參考物是 父元素 的font-size，具有繼承的特點。瀏覽器默認(rèn)字體是16px，整個頁面內(nèi)1em不是一個固定的值。

rem是CSS3新增的一個相對單位 ，但相對的只是HTML根元素 font-size。通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。

rem在移動端應(yīng)用可參考淘寶的頁面 或者蘇寧的頁面

不是每個地方都要用rem，rem只適用于固定尺寸

頁面基準(zhǔn)750px;html font-size值的計算：

前端行業(yè)做移動端會普遍默認(rèn)用rem或em,是因為可以通過js控制根元素(或者用@media)來達(dá)到適配各種分辨率的字體大小的效果

% 百分比，相對長度單位，相對于父元素的百分比值

相對單位參考如下

使用相對尺寸單位計量，則在調(diào)整頁面的布局的時候，不需要遍歷所有的內(nèi)部DOM結(jié)構(gòu)，重新設(shè)置內(nèi)部子元素的尺寸大小。如果是隨著父容器或者是整體頁面布局而改變尺寸，則使用%更好，如元素的高度和寬度設(shè)置。

vm、vh、vmin、vmax是一種視窗單位，也是相對單位 。主要用于頁面視口大小布局，相對于rem在頁面布局上更加方便簡單。它相對的不是父節(jié)點或者頁面的根節(jié)點。而是由視窗（Viewport）大小來決定的，單位 1，代表類似于 1%。 視窗(Viewport)是你的瀏覽器實際顯示內(nèi)容的區(qū)域—，換句話說是你的不包括工具欄和按鈕的網(wǎng)頁瀏覽器。

具體描述如下：

vw：視窗寬度的百分比（1vw 代表視窗的寬度為 1%）

vh：視窗高度的百分比

vmin：取當(dāng)前Vw和Vh中較小的那一個值

vmax：取當(dāng)前Vw和Vh中較大的那一個值

vh和vw相對于視口的高度和寬度 ， 1vh 等于1/100的視口高度，1vw 等于1/100的視口寬度 比如：瀏覽器高度900px，寬度為750px, 1 vh = 900px/100 = 9 px，1vw = 750px/100 = 7.5 px， 很容易實現(xiàn)與同屏幕等高的框。

網(wǎng)頁標(biāo)題：css樣式vw,CSS樣式代碼
文章出自：http://chinadenli.net/article6/dsdigog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、App開發(fā)、營銷型網(wǎng)站建設(shè)、面包屑導(dǎo)航、網(wǎng)站收錄、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)