移動端一畫素
阿新 • • 發佈：2019-02-14
概念
CSS畫素：適用於web程式設計，指的是我們在樣式程式碼中使用到的邏輯畫素，是一個抽象概念，實際並不存在
物理畫素：物理畫素，裝置能控制顯示的最小單位，我們常說的1920×1080畫素解析度就是用的裝置畫素單位。
裝置獨立畫素：與裝置無關的邏輯畫素，代表可以通過程式控制使用的虛擬畫素，是一個總體概念，包括了CSS畫素。
DPR（window.devicePixelRatio）：是裝置上物理畫素和裝置獨立畫素(device-independent pixels (dips))的比例, 公式表示就是：window.devicePixelRatio = 物理畫素 / dips
大部分瀏覽器devicePixelRatio值為1，當它們移動到視網膜類似裝置時候，可能就會遇到問題。
當裝置畫素比為1:1時，使用1（1×1）個裝置畫素顯示1個CSS畫素；
當裝置畫素比為2:1時，使用4（2×2）個裝置畫素顯示1個CSS畫素，1px代表2個物理長度；
當裝置畫素比為3:1時，使用9（3×3）個裝置畫素顯示1個CSS畫素，1px代表3個物理長度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.onePixel {
position: relative;
} 