尽管我移动端采用的是vh/vw来适配所有的手机(基本没用css媒体查询),但是针对1px的边框(项目中所有小于等于1px的都不会转换成vh/vw),在移动端还是显得很粗(写到这里还没试过将1px转成vh/vw的情况,-_-||)。
本方法采用的是(老生常谈,网上一大堆-_-||)伪类实现:
.notOrder{
font-size: 20px;
color: #F42B3F;
display: inline-block;
width: 72px;
height: 28px;
text-align: center;
line-height: 0px;
padding: 14px 0;
box-sizing: border-box;
&::after{ /*after实现边框*/
display: block;
content: ' ';
width: 200%;/*宽高放大一倍*/
height: 200%;
position: absolute;
left: 0;
top: 0;
transform: scale(0.5) translateX(-50%) translateY(-50%);/*scale将其缩小与父元素一样的长宽*/
border:1px solid #FF9CAA;
border-radius: 8px;
}
}