使用vw来实现页面的适配。（文章通过PostCSS的插件把px转换成vw）
为了更好的实现长宽比，特别是针对于img、vedio和iframe元素。实现思路padding-top: 百分比;文章推荐方法:
//padding & 伪元素
.aspectration {
position: relative;
}
.aspectration:after {
content: "";
display: block;
width: 1px;
margin-left: -1px;
background-color: orange;
}
.aspectration[data-ratio="16:9"]:after {
padding-top: 56.25%;
}
// 其它子元素的宽高设置和容器.aspectration一样大小：position:absolute;
- 为了解决1px的问题，使用PostCSS插件[postcss-write-svg],自动生成border-image或者background-image的图片。
// 淘宝移动端处理1px边框方法，用1px宽加背景色模拟边框效果。
// 京东移动端
.bdr-r:after {
height: 100%;
content: '';
width: 1px;
border-right: 1px solid #f0f0f0;
position: absolute;
top: 0;
right: 0;
transform: scaleX(0.5);
-webkit-transform: scaleX(0.5);
z-index: 10;
}
// border-image方法
// line.png可用工具生成svg格式，假如需要制作border-bottom-width: 1px,图片格式需2px高，1px透明，1px视觉规定用色。
border-width: 0 0 1px 0;
border-image: url(line.png) 0 0 2 0 stretch;
p.s扩展资料
demo超链接
再谈Retina下1px的解决方案
CSS实现长宽比的几种方案
