1px边框在2倍屏上为2 “占位”，在3倍屏上为3 “占位”，但是就是想要达到设计图上的1px “占位”效果。
.content h1:after,
.content h2:after {
border-top: 1px solid #bfbfbf;
content: ' ';
display: block;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
-webkit-transform-origin: left bottom;
}
/* Retina 适配 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0),
only screen and (min--moz-device-pixel-ratio: 2.0),
only screen and (-o-min-device-pixel-ratio: 200/100),
only screen and (min-device-pixel-ratio: 2.0) {
.content h1:after,
.content h2:after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
/* 3倍屏适配 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.5),
only screen and (min--moz-device-pixel-ratio: 2.5),
only screen and (-o-min-device-pixel-ratio: 250/100),
only screen and (min-device-pixel-ratio: 2.5) {
.content h1:after,
.content h2:after {
-webkit-transform: scaleY(0.33333334);
transform: scaleY(0.33333334);
}
}
由于高清屏的特性，1px是有2*2个像素点渲染，border 1px在Retina屏下会渲染成2px的边框，实现方式有多种，有图片、阴影、缩放。
