1 개 화소의 경계를 달성하기위한 일반적인 방법은 다음과 경계 - 바닥 : 1 픽셀 단색 , 이 처리는 PC 측에서 표시되는 1 픽셀 테두리이지만, 이동 단말이 1 픽셀의 크기가 배치되어 있지 않은 경우, 수 2 픽셀이 될 수는 1.5px 등이 될 수 있으며,이 경우 그 이유는 값 최소 장치 화소 비율 다른 모바일 기기 iphone8 예와 동일하지이다의 분 기기 화소 비율 2 값은 요소의 경계에 기록하는 경우이다 테두리 바닥 : 1 픽셀 단색 , PC의 측면 나타내는 하단 테두리 1 픽셀은 디스플레이 iphone6 1 픽셀에 있지 않은, 즉, 그러나 2 픽셀 (당신하다면 내 기사처럼, 코멘트 환영, 환영 스타 . ~ 내주의에 오신 것을 환영합니다 GitHub의 블로그 ).
<P는>도 효과를 보려면. </ P>
<P>는 상기 결과로부터, 사용자가 직접 테두리 바닥 차분 볼 수있다 : 1 픽셀 단색, 1 픽셀 테두리 아래 이동 하단부를 달성하는 방법에 대해 얘기하는 휴대 전화를 사용하여 검색하지 1 픽셀, 제 디바이스 픽셀의 비율로 도입 지식 </ P>
장치 화소 비율 소개
<P는>
우리가 더 치명적 기술에 대해 이야기 해 보자 : 망막, 새로운 고해상도 디스플레이 기술, 애플이 나왔다, 당신은 더 달성하기 위해 화면에 압축 더 많은 픽셀을 넣을 수 있습니다 세부 화면의 해상도의 정도를 개선, 대부분의 장치는 현재이 기술에 사용됩니다. 이 해상도가 눈으로 개별 화소를 구별 할 수있다 상기 정상 가시 거리를 만들기에 충분하다. 또한 망막 디스플레이라고도 (화소 디바이스 비율>. 1)
</ P>
정의
<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>