1px解决方案
发布于 2022年 01月 20日 04:42
- 在移动端中,如果给元素设置一个像素的边框的话,那么在手机上看起来是会比一个像素粗的。
解决方法:使用伪类元素模拟边框,使用transform缩放
.button
{
height: 36px;
line-height: 36px;
font-size: 14px;
padding: 0px;
margin: 0px;
padding-left: 16px;
padding-right: 16px;
background-color: white;
border: none;
outline: none;
box-sizing: border-box;
border-radius: 5px;
position: relative;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
text-decoration: none;
display: block;
}
.button:after
{
content: '';
z-index: 1;
position: absolute;
border: 1px solid rgba(0,0,0,0.23);
pointer-events: none;
box-sizing: border-box;
transform-origin: 0 0;
transform: scale(calc(1/1));
top: 0px;
left: 0px;
width: calc(100% * 1);
height: calc(100% * 1);
border-radius: calc(5px * 1);
transition: all ease-in-out 150ms;
background-color: rgba(0,0,0,0);
}
.button:active:after
{
background-color: rgba(0,0,0,0.1);
}
.button.button-blue
{
background-color: #3F51B5;
color: white;
}
.button.button-blue:active:after
{
background-color: rgba(0,0,0,0.15);
}
@media screen and (-webkit-min-device-pixel-ratio: 2)
{
.button:after
{
border-radius: calc(5px * 2);
width: calc(100% * 2);
height: calc(100% * 2);
transform: scale(calc(1/2));
}
}
@media screen and (-webkit-min-device-pixel-ratio: 3)
{
.button:after
{
border-radius: calc(5px * 3);
width: calc(100% * 3);
height: calc(100% * 3);
transform: scale(calc(1/3));
}
}
@media screen and (-webkit-min-device-pixel-ratio: 4)
{
.button:after
{
border-radius: calc(5px * 4);
width: calc(100% * 4);
height: calc(100% * 4);
transform: scale(calc(1/4));
}
}
- 对于老项目伪类+transform
原理是把原先元素的 border 去掉,然后利用 :before 或者 :after 重做 border ,并 transform 的 scale 缩小一半,原先的元素相对定位,新做的 border 绝对定位。 单条border样式设置: 优点:所有场景都能满足,支持圆角(伪类和本体类都需要加border-radius) 缺点:对于已经使用伪类的元素(例如clearfix),可能需要多层嵌套
.scale-1px{ position: relative; border:none; }
.scale-1px:after{
content: '';
position: absolute; bottom: 0;
background: #000;
width: 100%; height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
- viewport + rem 实现
这种兼容方案相对比较完美,适合新的项目,老的项目修改成本过大。
HTML:
<div class="border-1px"></div>
CSS:
.border-1px {
position: relative;
}
.border-1px:after {
position: absolute;
content: "";
top: -50%;
bottom: -50%;
left: -50%;
right: -50%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
border-top: 1px solid #666;
}
@media (-webkit-min-device-pixel-radio: 3), (min-device-pixel-radio: 3) {
border-1px::after {
-webkit-transform: scaleY(0.33333333);
transform: scaleY(0.33333333);
}
}
@media (-webkit-min-device-pixel-radio: 2), (min-device-pixel-radio: 2) {
border-1px::after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
优点:所有场景都能满足,一套代码,可以兼容基本所有布局 缺点:老项目修改代价过大,只适用于新项目
- 使用box-shadow模拟边框,利用css 对阴影处理的方式实现0.5px的效果
样式设置:
.box-shadow-1px {
box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}
优点:代码量少,可以满足所有场景 缺点:边框有阴影,颜色变浅