为什么1px的边框在移动端上显示会比较粗呢？是因为不同的手机有不同的像素密度。物理像素：设备像素;设备独立像素：css像素（虚拟的）;设备像素比：设备独立像素比=物理像素/设备独立像素；普通屏：就是一个设备独立像素等于一个物理像素;二倍屏：就是一个设备独立像素等于4个物理像素;三倍屏：就是一个设备独立像素等于9个物理像素;
那怎么解决呢？看例子吧。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>border</title>
<link rel="stylesheet" href="css/1pxBorder.css" />
</head>
<body>
<div class="main">
<ul>
<li class="fineBorder-before-all">移动端1px边框的处理方法</li>
<li class="fineBorder-before-top">移动端1px边框的处理方法</li>
<li class="fineBorder-before-right">移动端1px边框的处理方法</li>
<li class="fineBorder-before-bottom">移动端1px边框的处理方法</li>
<li class="fineBorder-before-left">移动端1px边框的处理方法</li>
<li class="ff9623-fineBorder-before-all">移动端1px边框的处理方法，有圆角</li>
<li class="border-width">移动端1px不做处理的边框</li>
</ul>
</div>
</body>
</html>
ul {
list-style: none;
li {
margin: 2.5rem;
}
}
.fineBorder-before {
content: "";
display: block;
-webkit-transform: scale(0.5);
transform: scale(0.5);
position: absolute;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
}
.fineBorder-before-all {
position: relative;
&:before {
@extend .fineBorder-before;
border: 1px solid #f00;
}
}
.ff9623-fineBorder-before-all {
position: relative;
&:before {
@extend .fineBorder-before;
border: 1px solid #ff9623;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
border-radius: 8px;
}
}
.fineBorder-before-top {
position: relative;
&:before {
@extend .fineBorder-before;
border-top: 1px solid #f00;
}
}
.fineBorder-before-bottom {
position: relative;
&:before {
@extend .fineBorder-before;
border-bottom: 1px solid #f00;
}
}
.fineBorder-before-left {
position: relative;
&:before {
@extend .fineBorder-before;
border-left: 1px solid #f00;
}
}
.fineBorder-before-right {
position: relative;
&:before {
@extend .fineBorder-before;
border-right: 1px solid #f00;
}
}
.border-width {
border: 1px solid #f00;
}
image.png
网友评论