css 長(zhǎng)度單位 詳解

參考：

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

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

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

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

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

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

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

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

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

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

相對(duì)于父元素的長(zhǎng)度高度。

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

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

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

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

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。

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

px是固定的像素，一旦設(shè)置了就無(wú)法因?yàn)檫m應(yīng)頁(yè)面大小而改變。

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

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

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

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

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

做移動(dòng)頁(yè)面開(kāi)發(fā)時(shí)，如果使用 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)頁(yè)視口尺寸

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

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

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

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

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

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

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

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

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

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

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

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

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

css3中vh和vw是什么意思

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

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

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

有兩種類(lèi)型的長(zhǎng)度單位：相對(duì)和絕對(duì)

px就是pixel（像素）的縮寫(xiě)，絕對(duì)單位，相對(duì)長(zhǎng)度單位，相對(duì)于屏幕分辨率。

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

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

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

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

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

前端行業(yè)做移動(dòng)端會(huì)普遍默認(rèn)用rem或em,是因?yàn)榭梢酝ㄟ^(guò)js控制根元素(或者用@media)來(lái)達(dá)到適配各種分辨率的字體大小的效果

% 百分比，相對(duì)長(zhǎng)度單位，相對(duì)于父元素的百分比值

相對(duì)單位參考如下

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

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

具體描述如下：

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

vh：視窗高度的百分比

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

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

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

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

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

廣告

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