1. CSS有幾種表示長度的不同單位。

2. 許多CSS屬性接受"長度"值, 諸如: width、margin、padding、font-size等。

3. 長度是一個(gè)后面跟著長度單位的數(shù)字, 諸如: 10px、2em等。

4. 數(shù)字和單位之間不能出現(xiàn)空格。但是, 如果值為0, 則可以省略單位。

5. 對(duì)于某些CSS屬性, 允許使用負(fù)的長度。

6. 長度單位有兩種類型: 絕對(duì)單位和相對(duì)單位。

7. 絕對(duì)長度

7.1. 絕對(duì)長度單位是固定的, 用任何一個(gè)絕對(duì)長度表示的長度都將恰好顯示為這個(gè)尺寸。

7.2. 不建議在屏幕上使用絕對(duì)長度單位, 因?yàn)槠聊怀叽缱兓艽蟆５? 如果已知輸出介質(zhì), 則可以使用它們, 例如: 用于打印布局(print layout)。

7.3. 像素(px)是相對(duì)于觀看設(shè)備的。對(duì)于低dpi的設(shè)備, 1px是顯示器的一個(gè)設(shè)備像素(點(diǎn))。對(duì)于打印機(jī)和高分辨率屏幕, 1px表示多個(gè)設(shè)備像素。

8. DPI和PPI

8.1. dpi(Dots Per Inch)指每一英寸長度中, 取樣、可顯示或輸出點(diǎn)的數(shù)目。

8.2. 如果一臺(tái)打印機(jī)的分辨率是4800×1200dpi, 那么意味著在X方向(橫向)上, 兩個(gè)墨點(diǎn)最近的距離可以達(dá)到1/4800英寸; 在Y方向(縱向)上, 兩個(gè)墨點(diǎn)的距離可以達(dá)到1/1200英寸。

8.3. 例如HP噴墨打印機(jī)最高標(biāo)稱分辨率是4800×1200dpi, 這意味著在紙張的X方向(橫向)上, 每一英寸長度上理論上可以放置4800個(gè)墨點(diǎn)。但是如果真的在普通介質(zhì)的一英寸上放置全部的4800個(gè)墨點(diǎn), 會(huì)發(fā)生什么情況呢?紙張對(duì)墨水的吸收過飽和, 墨水連成一片, 反而使分辨率下降。所以"理論"點(diǎn)數(shù), 是指打印機(jī)能夠達(dá)到的能力極限, 但是實(shí)現(xiàn)起來需要依靠紙張的配合, 如果采用專用紙張, 便可達(dá)到更好的性能, 在每個(gè)英寸上放置更多的獨(dú)立墨點(diǎn), 如果使用紙張不能支持選定的最高分辨率, 就會(huì)出現(xiàn)相鄰的墨點(diǎn)交融聯(lián)成一片的情況, 從而影響打印效果。

8.4. dpi早期是印刷上的記量單位, 意思是每英寸上, 所能印刷的網(wǎng)點(diǎn)數(shù)(Dot Per Inch)。但隨著數(shù)字輸入, 輸出設(shè)備快速發(fā)展, 大多數(shù)的人也將數(shù)字影像的解析度用DPI表示, 但較為嚴(yán)謹(jǐn)?shù)娜丝赡茏⒁獾? 印刷時(shí)計(jì)算的網(wǎng)點(diǎn)(Dot)和電腦顯示器的顯示像素(Pixel)并非相同, 所以較專業(yè)的人士, 會(huì)用PPI(Pixel Per Inch)表示數(shù)字影像的解析度, 以區(qū)分二者。

8.5. ppi(pixels per inch)是圖像分辨率的單位, 圖像ppi值越高, 畫面的細(xì)節(jié)就越豐富, 因?yàn)閱挝幻娣e的像素?cái)?shù)量更多, 數(shù)碼相機(jī)拍出來的圖片因品牌或生產(chǎn)時(shí)間不同可能有所不同, 常見的有72ppi(web上使用的圖片都是72ppi), 180ppi和300ppi。

8.6. ppi和dpi確實(shí)是兩個(gè)概念, 但是有些事情是約定成俗的, 圖片的ppi無法反映這張圖片能在沖印店得到的沖印質(zhì)量。在沖印店里只用dpi, 只要知道你圖片的像素和你所需要印制的尺寸, 這兩個(gè)要素構(gòu)成了dpi。

8.7. 打印尺寸、圖像的像素?cái)?shù)與打印分辨率之間的關(guān)系可以利用下列的計(jì)算公式加以表示:

8.7.1.?圖像的橫向像素?cái)?shù) = 打印橫向分辨率 × 打印的橫向尺寸;

8.7.2.?圖像的豎向像素?cái)?shù) = 打印豎向分辨率 × 打印的豎向尺寸;

8.7.3.?圖像的橫向像素?cái)?shù) / 打印橫向分辨率 = 打印的橫向尺寸;

8.7.4.?圖像的豎向像素?cái)?shù) / 打印豎向分辨率 = 打印的豎向尺寸。

8.7.5.?例如: 希望打印照片的尺寸是4*3inch, 而打印分辨率橫向和豎向都是300dpi, 則需要照相機(jī)采集的像素?cái)?shù)至少為(300 * 4) * (300 * 3) = 1080000像素, 約一百萬像素。

9. 物理像素(device pixels)

9.1. 對(duì)于一個(gè)款型的設(shè)備來說, 物理像素的大小是固定的, 在設(shè)備的設(shè)計(jì)之初就已經(jīng)被確定好了。

9.2. 上圖放大的這一塊區(qū)域, 我們可以看到有很多重復(fù)的單元, 每個(gè)單元均由紅、綠、藍(lán)三原色組成。我們稱: 一組三原色組成的一塊區(qū)域?yàn)橐粋€(gè)物理像素。不同類型的設(shè)備, 三原色的形狀和布局會(huì)存在一定的差異。并且, 不同款型的設(shè)備之間, 物理像素的大小也會(huì)有區(qū)別。

10. 物理分辨率是水平與豎直物理像素個(gè)數(shù)的乘積。

11. 顯示分辨率(也叫像素分辨率)

11.1. 我們平常所說的顯示器分辨率, 一般指桌面設(shè)定的顯示分辨率, 而不是物理分辨率。

11.2. 現(xiàn)在液晶顯示器成為主流, 它只有在二者相等時(shí)顯示效果最佳, 所以現(xiàn)在我們的桌面分辨率幾乎總是與顯示器的物理分辨率一致了。一臺(tái)物理分辨率為1280×1024的液晶顯示器, 在默認(rèn)情況下, 桌面顯示的分辨率也是1280×1024px, 這個(gè)時(shí)候是最清晰的; 我們可以設(shè)定桌面顯示分辨率為800×600px, 非原始分辨率必須通過在液晶顯示屏上擬合重新取樣來實(shí)現(xiàn), 要使用插值算法, 這種情況下可能會(huì)讓顯示屏看起來破碎或模糊; 物理分辨率為1280×1024液晶顯示器可能無法完全顯示1600×1200px的分辨率, 因?yàn)槲锢砣亟M不夠。

11.3. 自己電腦顯示屏的多個(gè)顯示分辨率

11.4. 推薦的分辨率就是顯示屏的物理分辨率。推薦使用顯示分辨率和物理分辨率相同。

12. 設(shè)備像素(device pixel)

12.1. 顯示器屏幕實(shí)際上是由一個(gè)一個(gè)"點(diǎn)"組成的, 這些"點(diǎn)"就是設(shè)備像素。使用推薦的顯示分辨率, 設(shè)備像素和物理像素相同。

12.2. 需要注意的是, device pixel實(shí)際是可以"變化"的, 當(dāng)你降低設(shè)備分辨率時(shí), 一個(gè)"點(diǎn)"就需要更多的三元素組來組成, 此時(shí)"點(diǎn)"的物理尺寸就增大了。

12.3. 求自己臺(tái)式機(jī)顯示屏的ppi和設(shè)備像素

12.3.1.?屏幕實(shí)際尺寸21.5英寸。是對(duì)角線的長度。

12.3.2.?屏幕寬高實(shí)際尺寸: 476mm*268mm。

12.3.3.?屏幕顯示分辨率1920 *?1080(推薦分辨率)。

12.3.4.?屏幕ppi的計(jì)算

12.3.5.?設(shè)備像素: 1in / 102ppi = 25.4mm / 102ppi = 0.249mm

12.4. 求自己筆記本顯示屏的ppi和設(shè)備像素

12.4.1.?屏幕實(shí)際尺寸13.3英寸。是對(duì)角線的長度。

12.4.2.?屏幕寬高實(shí)際尺寸: 286mm*179mm。

12.4.3.?屏幕顯示分辨率2560?*?1600(推薦分辨率)。

12.4.4.?屏幕ppi的計(jì)算

12.4.5.?設(shè)備像素: 1in / 227ppi = 25.4mm / 227ppi = 0.1119mm

12.5. 改變自己臺(tái)式機(jī)顯示屏的分辨率后, 求ppi和設(shè)備像素

12.5.1.?屏幕實(shí)際尺寸21.5英寸。是對(duì)角線的長度。

12.5.2.?屏幕寬高實(shí)際尺寸: 476mm*268mm。

12.5.3.?屏幕顯示分辨率1600?*?900。

12.5.4.?屏幕ppi的計(jì)算

12.5.5.?設(shè)備像素: 1in / 85ppi = 25.4mm / 85ppi = 0.2988mm

12.6. 由于不同的設(shè)備屏幕顯示分辨率和尺寸可能不一樣, 所以設(shè)備上物理像素(一般情況下物理像素和設(shè)備像素一樣大小)的大小也就不一樣。但是對(duì)于CSS來說, 它希望在所有的設(shè)備上元素的顯示效果看起來都是差不多的。

12.7. 那怎么才能讓同一元素在不同的設(shè)備上顯示的效果差不多呢?w3c提出了一個(gè)概念, 也就是下面將要介紹的參考像素(reference pixel)。

13. 參考像素(reference pixel)

13.1. 參考像素即為從一臂之遙看解析度為96dpi(太多現(xiàn)有內(nèi)容依賴于96dpi的假設(shè), 而打破該假設(shè)會(huì)破壞內(nèi)容)的設(shè)備輸出時(shí), 1個(gè)設(shè)備像素所對(duì)應(yīng)的視角, 這個(gè)角就是CSS參考像素, 沒錯(cuò)CSS參考像素其實(shí)是一個(gè)角。這個(gè)視角的大小大概是0.0213度, (1/96)in / (28in * 2 * PI / 360deg) = 0.0213度。

13.2. 成人的手臂大約是28英寸。

13.3. ?因此, 也可以說1px對(duì)應(yīng)于大約0.26毫米(1/96英寸)。

14. CSS像素

14.1. 建議CSS像素單位參考最接近參考像素的整數(shù)個(gè)設(shè)備像素。

15. 像素例子

15.1.?自己臺(tái)式代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>像素長度單位</title><style type="text/css">* {margin: 0;padding: 0;}div {width: 1920px;height: 500px;background-color: red;}</style></head><body><div></div></body> </html>

15.2.?自己臺(tái)式機(jī)上運(yùn)行項(xiàng)目

15.3.?自己臺(tái)式機(jī)屏幕實(shí)際尺寸21.5英寸, 是對(duì)角線的長度。屏幕顯示分辨率1920 * 1080(推薦分辨率, 同時(shí)也是物理分辨率)。屏幕ppi是102ppi。設(shè)備像素: 1in / 102ppi = 25.4mm / 102ppi = 0.249mm。1920CSS像素, 剛好鋪滿整個(gè)屏幕, 說明1個(gè)CSS像素 = 設(shè)備像素(物理像素) = 0.249mm。

15.4.?自己筆記本代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>像素長度單位</title><style type="text/css">* {margin: 0;padding: 0;}div {width: 1280px;height: 500px;background-color: red;}</style></head><body><div></div></body> </html>

15.5.?自己筆記本上運(yùn)行項(xiàng)目

15.6.?自己筆記本屏幕實(shí)際尺寸13.3英寸, 是對(duì)角線的長度。屏幕顯示分辨率2560 * 1600(推薦分辨率, 同時(shí)也是物理分辨率)。屏幕ppi是227ppi。設(shè)備像素: 1in / 227ppi = 25.4mm / 227ppi = 0.1119mm。1280CSS像素, 剛好鋪滿整個(gè)屏幕, 說明1個(gè)CSS像素 = 2設(shè)備像素(物理像素) = 0.2238mm。

16. 毫米,厘米,英寸,點(diǎn)和派卡例子

16.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>毫米,厘米,英寸,點(diǎn)和派卡</title><style type="text/css">* {margin: 0;padding: 0;}#mm {width: 100mm;height: 100mm;background-color: red;float: left;}#cm {width: 10cm;height: 10cm;background-color: green;float: left;}#in {width: 5in;height: 5in;background-color: blue;float: left;}#pt {width: 360pt;height: 360pt;background-color: fuchsia;float: left;}#pc {width: 30pc;height: 30pc;background-color: gray;float: left;}</style></head><body><div id="mm">100mm * 100mm</div><div id="cm">10cm * 10cm</div><div id="in">5in * 5in</div><div id="pt">360pt * 360pt</div><div id="pc">30pc * 30pc</div></body> </html>

16.2. 效果圖

17. 相對(duì)長度

17.1. 相對(duì)長度單位規(guī)定相對(duì)于另一個(gè)長度屬性的長度。使用相對(duì)單位的樣式表可以更輕松地從一種輸出環(huán)境擴(kuò)展到另一種輸出環(huán)境。

17.2. em和rem單元可用于創(chuàng)建完美的可擴(kuò)展布局。

17.3. 視口(Viewport)等于瀏覽器窗口的尺寸。如果視口寬50厘米, 則1vw = 0.5cm。

18. 相對(duì)于視口寬度和高度, 相對(duì)于較小和較大視口尺寸例子

18.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>相對(duì)于視口寬度和高度, 相對(duì)于較小和較大視口尺寸</title><style type="text/css">* {margin: 0;padding: 0;}#vw-vh {width: 50vw;height: 50vh;background-color: red;}#vmin {width: 20vmin;height: 20vmin;background-color: green;float: left;}#vmax {width: 20vmax;height: 20vmax;background-color: blue;float: left;}</style></head><body><div id="vw-vh"><p>屏幕實(shí)際尺寸: 476mm*268mm</p><p>測量屏幕尺寸: 508mm*286mm</p><p>瀏覽器最大化: 視口寬度508mm, 視口高度257mm</p><p>width: 50vw = 508mm * 0.01 * 50 = 254mm</p><p>height: 50vh = 257mm * 0.01 * 50 = 128.5mm</p></div><div id="vmin">20vmin * 20vmin</div><div id="vmax">20vmax * 20vmax</div></body> </html>

18.2. 效果圖

19. %,em和rem

19.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>%相對(duì)于父元素, em相對(duì)于元素字體大小和rem相對(duì)于根元素字體大小</title><style type="text/css">* {margin: 0;padding: 0;}html {font-size: 32px;}div {font-size: 24px;width: 10em;height: 10rem;background-color: red;}p {width: 50%;height: 50%;background-color: blue;}</style></head><body><div><p></p></div></body> </html>

19.2. 效果圖

總結(jié)

以上是生活随笔為你收集整理的017_CSS长度单位的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。