.border-bottom{
position: relative;
}
.border-bottom:after{
content:"";
position: absolute;
bottom:0px;
left:0px;
right:0px;
border-bottom:1px solid #ddd;
-webkit-transform-origin:0 0;
}
适配
/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
}
使用有局限性，一般只能用作分割线
解决移动端适配的问题的解决方案：
手淘－flexible方案
缺点：只针对IOS适配，Android机型复杂，统一设置dpr为1
