移动端页面适配新思路

• 使用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实现长宽比的几种方案