017_CSS长度单位
1. CSS有幾種表示長度的不同單位。
2. 許多CSS屬性接受"長度"值, 諸如: width、margin、padding、font-size等。
3. 長度是一個后面跟著長度單位的數字, 諸如: 10px、2em等。
4. 數字和單位之間不能出現空格。但是, 如果值為0, 則可以省略單位。
5. 對于某些CSS屬性, 允許使用負的長度。
6. 長度單位有兩種類型: 絕對單位和相對單位。
7. 絕對長度
7.1. 絕對長度單位是固定的, 用任何一個絕對長度表示的長度都將恰好顯示為這個尺寸。
7.2. 不建議在屏幕上使用絕對長度單位, 因為屏幕尺寸變化很大。但是, 如果已知輸出介質, 則可以使用它們, 例如: 用于打印布局(print layout)。
7.3. 像素(px)是相對于觀看設備的。對于低dpi的設備, 1px是顯示器的一個設備像素(點)。對于打印機和高分辨率屏幕, 1px表示多個設備像素。
8. DPI和PPI
8.1. dpi(Dots Per Inch)指每一英寸長度中, 取樣、可顯示或輸出點的數目。
8.2. 如果一臺打印機的分辨率是4800×1200dpi, 那么意味著在X方向(橫向)上, 兩個墨點最近的距離可以達到1/4800英寸; 在Y方向(縱向)上, 兩個墨點的距離可以達到1/1200英寸。
8.3. 例如HP噴墨打印機最高標稱分辨率是4800×1200dpi, 這意味著在紙張的X方向(橫向)上, 每一英寸長度上理論上可以放置4800個墨點。但是如果真的在普通介質的一英寸上放置全部的4800個墨點, 會發生什么情況呢?紙張對墨水的吸收過飽和, 墨水連成一片, 反而使分辨率下降。所以"理論"點數, 是指打印機能夠達到的能力極限, 但是實現起來需要依靠紙張的配合, 如果采用專用紙張, 便可達到更好的性能, 在每個英寸上放置更多的獨立墨點, 如果使用紙張不能支持選定的最高分辨率, 就會出現相鄰的墨點交融聯成一片的情況, 從而影響打印效果。
8.4. dpi早期是印刷上的記量單位, 意思是每英寸上, 所能印刷的網點數(Dot Per Inch)。但隨著數字輸入, 輸出設備快速發展, 大多數的人也將數字影像的解析度用DPI表示, 但較為嚴謹的人可能注意到, 印刷時計算的網點(Dot)和電腦顯示器的顯示像素(Pixel)并非相同, 所以較專業的人士, 會用PPI(Pixel Per Inch)表示數字影像的解析度, 以區分二者。
8.5. ppi(pixels per inch)是圖像分辨率的單位, 圖像ppi值越高, 畫面的細節就越豐富, 因為單位面積的像素數量更多, 數碼相機拍出來的圖片因品牌或生產時間不同可能有所不同, 常見的有72ppi(web上使用的圖片都是72ppi), 180ppi和300ppi。
8.6. ppi和dpi確實是兩個概念, 但是有些事情是約定成俗的, 圖片的ppi無法反映這張圖片能在沖印店得到的沖印質量。在沖印店里只用dpi, 只要知道你圖片的像素和你所需要印制的尺寸, 這兩個要素構成了dpi。
8.7. 打印尺寸、圖像的像素數與打印分辨率之間的關系可以利用下列的計算公式加以表示:
8.7.1.?圖像的橫向像素數 = 打印橫向分辨率 × 打印的橫向尺寸;
8.7.2.?圖像的豎向像素數 = 打印豎向分辨率 × 打印的豎向尺寸;
8.7.3.?圖像的橫向像素數 / 打印橫向分辨率 = 打印的橫向尺寸;
8.7.4.?圖像的豎向像素數 / 打印豎向分辨率 = 打印的豎向尺寸。
8.7.5.?例如: 希望打印照片的尺寸是4*3inch, 而打印分辨率橫向和豎向都是300dpi, 則需要照相機采集的像素數至少為(300 * 4) * (300 * 3) = 1080000像素, 約一百萬像素。
9. 物理像素(device pixels)
9.1. 對于一個款型的設備來說, 物理像素的大小是固定的, 在設備的設計之初就已經被確定好了。
9.2. 上圖放大的這一塊區域, 我們可以看到有很多重復的單元, 每個單元均由紅、綠、藍三原色組成。我們稱: 一組三原色組成的一塊區域為一個物理像素。不同類型的設備, 三原色的形狀和布局會存在一定的差異。并且, 不同款型的設備之間, 物理像素的大小也會有區別。
10. 物理分辨率是水平與豎直物理像素個數的乘積。
11. 顯示分辨率(也叫像素分辨率)
11.1. 我們平常所說的顯示器分辨率, 一般指桌面設定的顯示分辨率, 而不是物理分辨率。
11.2. 現在液晶顯示器成為主流, 它只有在二者相等時顯示效果最佳, 所以現在我們的桌面分辨率幾乎總是與顯示器的物理分辨率一致了。一臺物理分辨率為1280×1024的液晶顯示器, 在默認情況下, 桌面顯示的分辨率也是1280×1024px, 這個時候是最清晰的; 我們可以設定桌面顯示分辨率為800×600px, 非原始分辨率必須通過在液晶顯示屏上擬合重新取樣來實現, 要使用插值算法, 這種情況下可能會讓顯示屏看起來破碎或模糊; 物理分辨率為1280×1024液晶顯示器可能無法完全顯示1600×1200px的分辨率, 因為物理三元素組不夠。
11.3. 自己電腦顯示屏的多個顯示分辨率
11.4. 推薦的分辨率就是顯示屏的物理分辨率。推薦使用顯示分辨率和物理分辨率相同。
12. 設備像素(device pixel)
12.1. 顯示器屏幕實際上是由一個一個"點"組成的, 這些"點"就是設備像素。使用推薦的顯示分辨率, 設備像素和物理像素相同。
12.2. 需要注意的是, device pixel實際是可以"變化"的, 當你降低設備分辨率時, 一個"點"就需要更多的三元素組來組成, 此時"點"的物理尺寸就增大了。
12.3. 求自己臺式機顯示屏的ppi和設備像素
12.3.1.?屏幕實際尺寸21.5英寸。是對角線的長度。
12.3.2.?屏幕寬高實際尺寸: 476mm*268mm。
12.3.3.?屏幕顯示分辨率1920 *?1080(推薦分辨率)。
12.3.4.?屏幕ppi的計算
12.3.5.?設備像素: 1in / 102ppi = 25.4mm / 102ppi = 0.249mm
12.4. 求自己筆記本顯示屏的ppi和設備像素
12.4.1.?屏幕實際尺寸13.3英寸。是對角線的長度。
12.4.2.?屏幕寬高實際尺寸: 286mm*179mm。
12.4.3.?屏幕顯示分辨率2560?*?1600(推薦分辨率)。
12.4.4.?屏幕ppi的計算
12.4.5.?設備像素: 1in / 227ppi = 25.4mm / 227ppi = 0.1119mm
12.5. 改變自己臺式機顯示屏的分辨率后, 求ppi和設備像素
12.5.1.?屏幕實際尺寸21.5英寸。是對角線的長度。
12.5.2.?屏幕寬高實際尺寸: 476mm*268mm。
12.5.3.?屏幕顯示分辨率1600?*?900。
12.5.4.?屏幕ppi的計算
12.5.5.?設備像素: 1in / 85ppi = 25.4mm / 85ppi = 0.2988mm
12.6. 由于不同的設備屏幕顯示分辨率和尺寸可能不一樣, 所以設備上物理像素(一般情況下物理像素和設備像素一樣大小)的大小也就不一樣。但是對于CSS來說, 它希望在所有的設備上元素的顯示效果看起來都是差不多的。
12.7. 那怎么才能讓同一元素在不同的設備上顯示的效果差不多呢?w3c提出了一個概念, 也就是下面將要介紹的參考像素(reference pixel)。
13. 參考像素(reference pixel)
13.1. 參考像素即為從一臂之遙看解析度為96dpi(太多現有內容依賴于96dpi的假設, 而打破該假設會破壞內容)的設備輸出時, 1個設備像素所對應的視角, 這個角就是CSS參考像素, 沒錯CSS參考像素其實是一個角。這個視角的大小大概是0.0213度, (1/96)in / (28in * 2 * PI / 360deg) = 0.0213度。
13.2. 成人的手臂大約是28英寸。
13.3. ?因此, 也可以說1px對應于大約0.26毫米(1/96英寸)。
14. CSS像素
14.1. 建議CSS像素單位參考最接近參考像素的整數個設備像素。
15. 像素例子
15.1.?自己臺式代碼
<!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.?自己臺式機上運行項目
15.3.?自己臺式機屏幕實際尺寸21.5英寸, 是對角線的長度。屏幕顯示分辨率1920 * 1080(推薦分辨率, 同時也是物理分辨率)。屏幕ppi是102ppi。設備像素: 1in / 102ppi = 25.4mm / 102ppi = 0.249mm。1920CSS像素, 剛好鋪滿整個屏幕, 說明1個CSS像素 = 設備像素(物理像素) = 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.?自己筆記本上運行項目
15.6.?自己筆記本屏幕實際尺寸13.3英寸, 是對角線的長度。屏幕顯示分辨率2560 * 1600(推薦分辨率, 同時也是物理分辨率)。屏幕ppi是227ppi。設備像素: 1in / 227ppi = 25.4mm / 227ppi = 0.1119mm。1280CSS像素, 剛好鋪滿整個屏幕, 說明1個CSS像素 = 2設備像素(物理像素) = 0.2238mm。
16. 毫米,厘米,英寸,點和派卡例子
16.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>毫米,厘米,英寸,點和派卡</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. 相對長度
17.1. 相對長度單位規定相對于另一個長度屬性的長度。使用相對單位的樣式表可以更輕松地從一種輸出環境擴展到另一種輸出環境。
17.2. em和rem單元可用于創建完美的可擴展布局。
17.3. 視口(Viewport)等于瀏覽器窗口的尺寸。如果視口寬50厘米, 則1vw = 0.5cm。
18. 相對于視口寬度和高度, 相對于較小和較大視口尺寸例子
18.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>相對于視口寬度和高度, 相對于較小和較大視口尺寸</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>屏幕實際尺寸: 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>%相對于父元素, em相對于元素字體大小和rem相對于根元素字體大小</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. 效果圖
總結
以上是生活随笔為你收集整理的017_CSS长度单位的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 048_CSS3用户界面
- 下一篇： 016_CSS选择器列表