在移动端开发中，我们拿到设计师给的移动端图，通常像素大小实现都是图尺寸的一半，那图中1px边框呢，我们实际写0.5px？但是问题是很多浏览器不认识0.5px。
那怎么实现移动端1像素呢？
我实现的方法，直接上代码：
css：
.border-top,
.border-right,
.border-bottom,
.border-left{
position: relative;
}
.border-top::after,
.border-right::after,
.border-bottom::after,
.border-left::after{
content: '';
position: absolute;
overflow: hidden;
}
.border-top::after {
width: 100%;
height: 1px;
top: 0;
left: 0;
border-top: 1px solid #e8e8e8;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.border-bottom::after {
width: 100%;
height: 1px;
bottom: 0;
left: 0;
border-top: 1px solid #e8e8e8;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.border-left::after {
width: 1px;
height: 100%;
top: 0;
left: 0;
border-left: 1px solid #e8e8e8;
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
}
.border-right::after {
width: 1px;
height: 100%;
top: 0;
right: 0;
border-right: 1px solid #e8e8e8;
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
}
/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
.border-bottom::after,
.border-top::after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.border-left::after,
.border-right::after {
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
}
}
/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
.border-bottom::after,
.border-top::after {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
.border-left::after,
.border-right::after {
-webkit-transform: scaleX(0.33);
transform: scaleX(0.33);
}
}
html：
网友评论