basic concepts
Device pixel
English Device Pixels, abbreviated as DP , sometimes also called "physical pixels".
Device pixel is a unit that we describe electronic products and other physical objects; for example, we say 3000W pixels for cameras, 100 million pixels for mobile phones, and 4K for TVs.
When we describe the screen resolution of an electronic device of 1920*1080, the pixel we are talking about is also the device pixel, but it is usually the largest pixel.
Device independent pixels
English Device Independent Pixels, abbreviated as DIPs , sometimes called "logical pixels".
Among CSS, JavaScript, and PS, we often talk about pixels. For example, the font size and the pixels when the picture is wide and high are device-independent pixels.
In the browser, you can get device-independent pixels screen.width
Device pixel ratio
English Device Pixels Ratio, abbreviated as DPR ; represents the ratio of the physical pixels of device
The ratio of the device pixels of the current device to the independent pixels of the CSS device can be obtained through window.devicePixelRatio
PPI
English Pixels Per Inch, abbreviation PPI ; represents the number of pixels per inch, sometimes called "pixel density".
When we describe the screen size of electronic devices such as mobile phones, iPads, and computer monitors, we usually say 5.5 inches, 27 inches, and 40 inches.
The PPI "pixel density" is different for the same size screen and different resolution.
The calculation formula of PPI is:
The same 4.3-inch screen, the resolution of A is 480 800, and the resolution of B is 720 1280.
The pixel density "PPI" of screen A is 210;
The pixel density "PPI" of the B screen is 340;
For the same screen size, the larger the PPI value, the richer the details of the picture. Intuitively speaking, the larger the PPI value, the clearer the picture.
Retina display
It is a kind of LCD screen designed and commissioned by Apple. It has a high enough pixel density so that the human eye cannot distinguish the individual pixels.
The simple understanding is that the PPI value of the retina display is larger for the display of the same screen size.
Why is there a problem with 1PX
On the Retian screen, DPR is no longer 1, but greater than 1, such as 2, 3 or non-integer. IPhone 6's device pixel "physical pixel" is 750 1334, and its device independent pixel "logical pixel number" is 375 667. DRP = 2 is calculated according to the company.
You want to draw a 1PX lower border, the mobile phone screen actually allocates 2 device pixels "physical pixels".
1PX frame problem realization plan
Border-image images
.border-image-1px {
border-width: 1px 0px;
-webkit-border-image: url("data:image/png;base64,xxx") 2 0 stretch;
}background-image gradient
.border {
background-image:linear-gradient(180deg, red, red 50%, transparent 50%),
linear-gradient(270deg, red, red 50%, transparent 50%),
linear-gradient(0deg, red, red 50%, transparent 50%),
linear-gradient(90deg, red, red 50%, transparent 50%);
background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
background-repeat: no-repeat;
background-position: top, right top, bottom, left top;
padding: 10px;
}viewport + rem + js implementation
<html>
<head>
<title>1像素问题</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<style>
html {
font-size: 1px;
}
* {
padding: 0;
margin: 0;
}
.bds_b {
border-bottom: 1px solid #ccc;
}
.a,
.b {
margin-top: 1rem;
padding: 1rem;
font-size: 1.4rem;
}
.a {
width: 30rem;
}
.b {
background: #f5f5f5;
width: 20rem;
}
</style>
<script>
var viewport = document.querySelector("meta[name=viewport]");
//下面是根据设备像素设置viewport
if (window.devicePixelRatio == 1) {
viewport.setAttribute('content',
'width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no');
}
if (window.devicePixelRatio == 2) {
viewport.setAttribute('content',
'width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no');
}
if (window.devicePixelRatio == 3) {
viewport.setAttribute('content',
'width=device-width,initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no');
}
var docEl = document.documentElement;
var fontsize = 10 * (docEl.clientWidth / 320) + 'px';
docEl.style.fontSize = fontsize;
</script>
</head>
<body>
<div class="bds_b a">下面的底边宽度是虚拟1像素的</div>
<div class="b">上面的边框宽度是虚拟1像素的</div>
</body>
</html>box-shadow implementation
div {
-webkit-box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5);
}transform:scale(0.5) implementation
Method 1
Use a div with height:1px, and then set transform: scaleY(0.5);
div {
height: 1px;
bakcground: #000；
-webkit-transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
overflow: hidden;
} Method 2
Use the ::after and ::before pseudo-classes, set border-bottom: 1px solid #000, and then zoom-webkit-transform: scaleY(0.5); the requirement for two sidelines can be achieved
div::after {
content: '';
width: 100%;
border-bottom: 1px solid #000;
transform: scaleY(0.5);
} Method 3
Use ::after to set the border: 1px solid #000;width:200%;height: 200%;, and then zoom scale(0.5);
.div::after {
content: '';
width： 200%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border： 1px solid #bfbfbf;
border-radius: 4px;
-webkit-transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5);
-webkit-transform-origin: 0 0;
}reference
1 pixel border problem in mobile H5 development
Master the basic series of web development
Retina display
Pixels, physical pixels, and logical pixels of mobile web page knowledge summary
Mobile physical pixels and device independent pixels
One of the basis of CSS layout, device pixels, device independent pixels, device pixel ratio, and the relationship between CSS pixels
device pixel ratio
mobile terminal HD, multi-screen adaptation solution
iPhone 6 screen secret
mobile terminal 1 pixel border problem solution
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。