移動端一畫素
阿新 • • 發佈: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;
}
.onePixel:after {
display: block;
width: 100%;
height: 0;
content: '';
border-bottom: 1px solid black;
}
@media (-webkit-device-pixel-ratio: 2),(device-pixel-ratio: 2) {
.onePixel {
transform : scaleY(0.5);
-webkit-transform: scaleY(0.5);
}
}
.onePixel2 {
position: relative;
}
.onePixel2:after {
display: block;
width: 100%;
height: 0;
content: '';
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<br/>
<br/>
<br/>
<br/>
<div class = "onePixel"></div>
<br/>
<br/>
<br/>
<div class = "onePixel2"></div>
</body>
</html>