To achieve the 1 pixel border, the general approach is: border-bottom: 1px solid color , this processing is displayed on the PC side is 1px border, but when the mobile terminal is not placed 1px size, and can could be 2px, it may be 1.5px etc., the reason for this situation is a value min-device-pixel-ratio different mobile devices is not the same, to iphone8 example, the min-device-pixel-ratio of 2 value, if written at the border of an element is: border-bottom: 1px solid color , i.e., when the PC side shows a bottom border 1px, the display is not in iphone6 1px, but 2px (if you like my articles, comments welcome, welcome Star ~. Welcome to my attention github blog ).
<P> to see the effect in FIG. </ P>
<P> From the above results, you can see the difference, direct border-bottom: 1px solid color, not 1px browsing using a mobile phone, to talk about how to achieve the lower end moving below 1 pixel border, first introduced to the device-pixel-ratio of knowledge </ p>
device-pixel-ratio Introduction
<p>
Let us talk about a more critical a technology: retina, a new high-resolution display technology, Apple brought out, you can put more pixels compressed to a screen in order to achieve higher improve the degree of detail and resolution of the screen, most of the devices are currently used in this technique. This resolution is enough to make a normal viewing distance wherein the eye can not distinguish individual pixels. Also referred to as retinal display (Pixel-Device-ratio>. 1)
</ P>
definition
<p>
device-pixel-ratio = physical pixel / device-independent pixels(某一方向，横轴或纵轴),即所谓的设备像素比指的是物理像素与设备独立像素的比例
物理像素：我们说的分辨率，例如iphone8的分辨率750x1334px
独立像素：设备的实际视窗，例如iphone8的视窗375x667px
iphone8的device-pixel-ratio = 750 / 375 = 2
</p>
常见设备device-pixel-ratio值
- ios设备
<p>
无视网膜显示屏设备的device-pixel-ratio值为1，有视网膜显示屏设备的的device-pixel-ratio值为2
</p>
- Android设备
<p>
无视网膜显示屏设备的device-pixel-ratio值为1,有视网膜显示屏设备的的device-pixel-ratio值为1.5或者为3(普遍设备像素比为这2个值)
</p>
移动端实现1像素下边框的方法
- Media Queries媒体查询
<style>
.container {
width: 100%;
height: 30px;
position: relative;
background-color: yellow;
}
.container:after {
content: " ";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border-top: 1px solid red;
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5){
.container::after {
-webkit-transform: scaleY(0.7);
transform: scaleY(0.7);
}
}
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
.container::after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
.container::after {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
}
</style>
<div class="container">
移动端实现1像素下边框
</div>- rem布局实现
这里就不介绍rem的实现方法了，如果对rem布局不是很清楚的小伙伴，可以看看我写的另一篇文章，详细的介绍了rem的相关用法。
写在最后
<p>
用Media Queries媒体查询实现移动端1像素下边框，同样也可以实现移动端调用高清背景图，不同的设置使用的图片的大小不一，用这个方法同样也是可以实现的。
</p>