实现移动端的效果的话,有两种方法,第一种,就是用图片来做,
第二种就是用伪类来做,在这用图片来做的,我们不进行讨论,我们看一下用伪类来做的效果。
使用伪类的:after 或者:before创建1px的边框,然后通过适配不同设备的像素比,然后,
调整缩放的比例实现1px的效果
伪类的代码如下,所示:
.border-bottom{
position: relative;
border-top: none !important;
}
.border-bottom::after {
content: " ";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #e4e4e4;
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
}
通过媒体查询来适配这个效果:
*1.5倍屏的效果*/ @media only screen and (-webkit-min-device-pixel-ratio: 2.0) { .border-bottom::after { -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } } /*2倍屏的效果*/ @media only screen and (-webkit-min-device-pixel-ratio: 2.0) { .border-bottom::after { -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } } /* 3倍屏 */ @media only screen and (-webkit-min-device-pixel-ratio: 3.0) { .border-bottom::after { -webkit-transform: scaleY(0.33); transform: scaleY(0.33); }
这是我的想法,在这里附上大神的做法
https://www.cnblogs.com/lhb25/p/seven-method-for-1px-retina-screen.html