要实现一个Header，并且有一个下边框:1px solid red;
在高清屏下，比如iphone6，我们设置的border-bottom:1px solid red;可能会显得比在pc端粗，那么如何解决呢？
html
<div class="test">Transformed element</div>
css
.test::after {
display: flex;
border-bottom: 1px solid red;
transform:scaleY(0.5);
content:'';
}
效果
border-bottom@2x.png
注意
css里的display: flex;和content:'';是一定要加的，不然下面的border-bottom不会显示出来。transform:scaleY(0.5);是实现效果的核心，该代码让border-bottom在y轴上压缩了0.5。
思考
我想，我单独再写一个div，然后按照上述方式设置border-bottom，最后放到Header的底部行不行呢？
我觉得，在效果上可以实现，但是如果我要挪动Header的话，这个div要一起挪动才行，而这个下边框应该视作Header的一部分，而不应该单独拿出来，所以用::after是更优解。
适配多屏幕代码
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
.test {
&::after {
-webkit-transform: scaleY(0.7);
transform: scaleY(0.7);
}
}
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
.test {
&::after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
}
