learn:terms-about-pixel
差異處
這裏顯示兩個版本的差異處。
| 兩邊的前次修訂版前次修改 下次修改 | 前次修改 | ||
| learn:terms-about-pixel [2022/06/17 13:58] – 移除 - 外部編輯 (Unknown date) 127.0.0.1 | learn:terms-about-pixel [2024/12/22 21:17] (目前版本) – 外部編輯 127.0.0.1 | ||
|---|---|---|---|
| 行 1: | 行 1: | ||
| + | # 像素、解析度、PPI(像素密度) | ||
| + | ## 像素 pixel | ||
| + | |||
| + | 類似螢幕世界的「原子」的概念，是組成內容的最小單位。「2500萬像素」的意思就是該內容由 2500 萬個小點組成。 | ||
| + | |||
| + | |||
| + | ## 解析度 | ||
| + | |||
| + | 通常表示方式為 W x H。 | ||
| + | |||
| + | > 「百萬像素」、「千萬像素」這類的表示方式大多用在相機上，而在非相機領域時我們比較慣用的是寬×高的表達方式。 | ||
| + | |||
| + | |||
| + | ## PPI | ||
| + | |||
| + | pixels per inch，也就是每英吋有多少個像素的意思，所以數值越大，畫質越好，細節表現得越精細 | ||
| + | |||
| + | ## DPI | ||
| + | |||
| + | 對印表機來說，DPI 的 dot 指的是「墨點」，也就是每英吋可以印多少個點 | ||
| + | |||
| + | 對圖檔來說，dot 指的則是 pixel | ||
| + | |||
| + | 所以我們可以計算一張「72 DPI、512 x 512 解析度的圖」的物理尺寸寬度是 512/ | ||
| + | |||
| + | 相同解析度下，DPI 越高的話，圖片印出來會越小、越精細 | ||
| + | |||
| + | 所以 DPI 和圖檔大小、解析度無關，DPI 只跟印表機有關。 | ||
| + | ## CSS Pixel | ||
| + | |||
| + | 把前面講的 Pixel 改稱為 Device Pixel，並新增一個 CSS Pixel 給 Web 做 RWD 使用，而 CSS Pixel 和 Device Pixel 之間的轉換倍率則有多種稱呼： DPR (device pixel ratio)、DPPX (dots per pixel) 或 pixel density。 | ||
| + | |||
| + | > * Device Pixel Ratio / DPR：描述螢幕像素與 CSS 像素間的比例關係 | ||
| + | > | ||
| + | > * Dots Per Pixel / DPPX：「dot」指的是螢幕像素、「pixel」指的是 CSS pixel，描述兩者間的數量比 | ||
| + | > | ||
| + | > * Pixel Density：描述像素密度 | ||
| + | |||
| + | |||
| + | ### CSS Pixel 的幾個定義 | ||
| + | |||
| + | 原始定義本來是這樣： 1 CSS pixel ≈ 1/96 inch | ||
| + | |||
| + | 但為了因應不同大小的螢幕，觀看距離也有所不同，而在原始定義之外，有其它的參考定義： | ||
| + | |||
| + | * Modern laptop with LCD: 1 CSS Pixel ≈ 1/125 inch | ||
| + | * Smartphones / Tablets: 1 CSS Pixel ≈ 1/160 inch | ||
| + | |||
| + | 各家廠商也有自己的定義。 | ||
| + | |||
| + | ## Ref | ||
| + | |||
| + | - https:// | ||