详解移动端页面细线实现方案

详解移动端页面细线实现方案

特别提醒，本文写于2017-1-2，下面案例中出现的各大网站的实现方式随时有可能变化。

先说下本文要做什么：解析一些主流的移动端H5虚线方案。见下图：

 

很多注重用户体验的移动端web设计都会使用细线，在PC端也就是简单的一句：

border-bottom:1px solid#e0e0e0;

在PC端web上只要简单的使用border-bottom属性去设置一条1px的细线就可以实现上图的效果。但是放到移动端，问题就大了。由于devicePixelRatio的存在，移动端永远无法使用border-bottom属性实现一个统一的1px细线。这个时候要去做一条细线就会需要很多技巧和经验。经验的第一条法则就是需要明确的就是没有一种万能的方法能够在所有移动设备上实现一致的细线体验，我们能做的就是尽量去写一种能够满足大部分移动设备细线呈现效果的样式，即使是大公司之间也纷纷采用不同的方案去实现。本文将针对几个较常见的案例来进行简要介绍细线实现的方式。

·京东手机版虚线方案

案例一：

 

 

 

上图是京东手机版的一张网页布局截图，地址在这里：http://m.jd.com/。最右侧的样式代码看不清的话看下面：

.bdr-bottom:after {
    height: 1px;
    content: '';
    width: 100%;
    border-top: 1px solid #f0f0f0;
    position: absolute;
    bottom: -1px;
    right: 0;
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5); 
}

这条横细线通过上