在前端開發中，物理畫素和邏輯畫素是兩個重要的概念，它們共同影響著如何在螢幕上顯示內容。它們的區別在於：
-
物理畫素 (Physical Pixel): 指的是顯示器上可以實際控制發光的最小單位。一個物理畫素就是一個螢幕上的一個物理光點。物理畫素的數量是由螢幕硬體決定的，是固定的，不可改變的。例如，一個解析度為 1920x1080 的顯示器，水平方向有 1920 個物理畫素，垂直方向有 1080 個物理畫素。
-
邏輯畫素 (Logical Pixel, 也稱為裝置獨立畫素 DIP 或 CSS 畫素): 是瀏覽器使用的抽象單位，用於表示網頁內容的大小和位置。邏輯畫素的大小並不是固定的，它會根據裝置的畫素密度 (PPI - Pixels Per Inch) 和縮放比例進行調整，以保證在不同裝置上顯示一致的視覺效果。
它們之間的關係：
邏輯畫素和物理畫素的關係由裝置畫素比 (Device Pixel Ratio, DPR 或 dpr) 決定。
- DPR = 物理畫素 / 邏輯畫素
例如，在一個 DPR 為 2 的裝置上，一個邏輯畫素對應著 2x2 個物理畫素。這意味著，一個 100x100 邏輯畫素的圖片，在這個裝置上實際會佔據 200x200 物理畫素的空間。
為什麼要區分物理畫素和邏輯畫素？
在高解析度螢幕 (例如 Retina 螢幕) 出現之前，邏輯畫素和物理畫素通常是 1:1 的關係。但是，隨著高解析度螢幕的普及，如果仍然使用物理畫素作為網頁佈局的單位，會導致網頁在高解析度螢幕上顯示得非常小。為了解決這個問題，引入了邏輯畫素的概念。
透過使用邏輯畫素，開發者可以不必關心裝置的實際解析度，只需要按照邏輯畫素進行佈局。瀏覽器會根據裝置的 DPR 自動將邏輯畫素轉換為對應的物理畫素，從而保證網頁在不同裝置上顯示一致的視覺效果。
在前端開發中的應用：
- CSS: 在 CSS 中，我們通常使用邏輯畫素作為單位，例如
px。 - JavaScript: 在 JavaScript 中，我們可以透過
window.devicePixelRatio獲取裝置的 DPR。 - 圖片: 為了保證在高解析度螢幕上顯示清晰的圖片，我們需要提供不同解析度的圖片，例如 2x 圖和 3x 圖，並使用媒體查詢或
<picture>元素來根據 DPR 選擇合適的圖片。
總而言之，理解物理畫素和邏輯畫素的區別對於前端開發者至關重要，它可以幫助我們更好地控制網頁在不同裝置上的顯示效果，並提供更好的使用者體驗。