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. 效果圖