詳解行動端頁面細線實現方案

詳解行動端頁細線實作方案

特別提醒，本文寫於2017-1-2，以下案例中出現的各大網站的實作方式隨時有可能變化。

先說下本文要做什麼：解析一些主流的行動端H5虛線方案。見下圖：

很多注重使用者體驗的行動端web設計都會使用細線，在PC端也就是簡單的一句：

border-bottom:1px solid#e0e0e0;

#在PC端web上只要簡單的使用border-bottom屬性去設定一條1px的細線就可以實現上圖的效果。但是放到行動端，問題就大了。由於devicePixelRatio的存在，行動端永遠無法使用border-bottom屬性實作一個統一的1px細線。這時候要去做一條細線就會需要很多技巧和經驗。經驗的第一條法則就是需要明確的就是沒有萬能的方法能夠在所有行動裝置上達到一致的細線體驗，我們能做的就是盡量去寫一種能夠滿足大部分行動裝置細線呈現效果的樣式，即使是大公司之間也紛紛採用不同的方案去實現。本文將針對幾個較常見的案​​例來進行簡要介紹細線實現的方式。

·京東手機版虛線方案

案例一：

#上圖是京東手機版的一張網頁版面截圖，網址在這裡：http://www.php.cn/。最右邊的樣式程式碼看不清楚的話看下面：

.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); 
}

這條橫細線透過上面這種樣式呈現出來。這種方式的核心在於使用transform:scaleY來使得1px的border得以收縮，最終呈現出細線的效果。這種細線的實作方式最大的優點就是簡單。

但是這種實現方式有三個較大的缺陷：

（1）筆者個人在開發中也使用過這種樣式實現細線，相對比較負責人的說，這種實現細線的方式應該是主流方式中適配性最差的一種。許多行動裝置上都會引起粗細不均、細線消失斷裂的相容性問題。

（2）對於頁面會進行重繪的佈局，這種細線實作方式非常差。例如對於這個網頁，要求點擊細線上的p“京東家電”，需要在p下方彈出一個下拉彈框，可以讓用戶直接點擊“進入店鋪”之類的按鈕，大部分移動設備在彈出這個彈框時，細線就會消失。

（3）筆者在上面的樣式程式碼中已經用底線標示出來了，bottom:-1px。這個-1px其實是湊出來的。這個樣式標準的寫法應該是bottom:0px。然而，京東的開發人員肯定也發現了bottom:0px;的寫法幾乎在所有行動裝置上都是錯位的，因此他們最終改寫了bottom:-1px。那麼-1px就完事了嗎？不是的，在很多設備上，-1px將導致細線偏移出界，也就是消失。

·淘寶手機版、騰訊財經手機版虛線方案

方案二、三：

上圖是淘寶網手機版首頁的一個細線實現截圖，網址：http://www.php.cn/，樣式代碼如下：

.tb_line{
    box-sizing: border-box;
    line-height: 0;
    background-color: rgb(239, 239, 239);
    width: 100%;
    height: 1px;
}

淘寶手機版沒有使用CSS偽類進行細線的實現，而是在需要使用細線的地方統一使用p來補位。

上圖是騰訊財經手機版主頁的一個細線實現截圖，網址：http://www.php. cn/，樣式程式碼如下：

.navTab{
    border-bottom: 1px solid #eceef0;
    box-shadow: 0 1px 1px #fff;
}

在筆者第一次看到這種實作方式的時候，確實覺得這種方式很有趣：先設定一個1px粗的border-bottom，這個時候在大部分行動裝置上會呈現出很粗的線，然後再使用白色CSS陰影，並且偏移1px來壓住過粗的border-bottom線，結果就看到了一條細線產生。

 

之所以把二、三兩種方案放在一起，是因為這兩個方案相似點太多了。

（1）這兩種實現方案呈現出的細線相對而言都比較粗，並沒有真的按照「細線」的標準呈現。

（2）淘寶手機版使用的是p代表細線，因此在類似table的佈局中就不太適用。當然這個問題可以透過在切圖時避免使用table來解決。

（3）筆者在嘗試淘寶細線方案的時候在華為榮耀手機上看到細線消失斷裂的問題。

那么说说优点吧：细线方案本来就没有万全之策，淘宝网和腾讯网相对而言都是经过较为全面的测试而呈现在公众面前的，因此我们完全可以借鉴并采纳别人的成熟设计方案，省去自己的烦恼。但是上述的两种实现方案都需要在设计之初就计划好，如果前期使用了CSS伪类然后想要改成上面的方案，相对改动会比较大。而且css阴影实现的细线确实是粗了一点，需要配合一个简洁干净的页面布局。

·网易音乐手机版虚线方案

方案四：

网易云音乐手机版，网址：http://www.php.cn/。这个就简单粗暴了，直接将细线嵌套在图片中，笔者将这个例子放在这里就是介绍一种思路。这种方式应该不会有兼容性问题，但是图片结合细线需要在设计阶段考虑。如果不是一个图片很多的网页，强行使用图片来实现细线会大大增加页面的体积。

·牛倍（模拟炒股）手机版虚线方案

方案五：

正如大家在本文顶部见到的第一张图片所示，样式代码：

.table_position td:before{ 
    content: " "; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    width: 100%; 
    height: 1px; 
    background-image: -webkit-linear-gradient(0deg, #ddd 50%, transparent 50%); 
    background-image: -moz-linear-gradient(0deg, #ddd 50%, transparent 50%); 
    background-image: -ms-linear-gradient(0deg, #ddd 50%, transparent 50%); 
    background-image: -o-linear-gradient(0deg, #ddd 50%, transparent 50%); 
    background-image: linear-gradient(0deg, #ddd 50%, transparent 50%);
}

笔者的项目中大量使用了这种细线实现，使用的是CSS渐变，并且可以配合伪类一起使用。这种实现方式呈现的细线比较好看，方案一和方案五呈现出的细线几乎相同，可以互为替换方案。方案五细线对于页面重绘时的支持比较好（方案一讨论过的缺陷）。不过方案五实现方式已知的缺陷就是在某些安卓手机上会出现细线消失、断裂的问题。

·总结与建议

到此为止，笔者简单总结一下：

（1）对于处于设计阶段的产品，建议考虑方案二和方案三的实现方式，并相应的做一些设计上的调整。人家已经造好了轮子，我们为什么不拿来直接用呢？

（2）对于已经使用了伪类来实现细线，或者使用了table布局的页面，建议优先考虑方案五，其次在某些特定机型上使用CSS媒体查询使用方案一作为互补替换方案。通常也可以解决大部分问题。

（3）可以考虑考虑方案四的实现方式是否适合你。

·其他方案

其他实现方案：

知乎上的一种实现：

.table_position td:before{
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-right: 1px solid rgba(255,255,255,0.3);
    -webkit-transform: scale(.5);
    -webkit-transform-origin: 0 0;
    -webkit-box-sizing: border-box;
    z-index :0;
}

百度糯米的一种实现：http://www.php.cn/

@media only screen and (-webkit-min-device-pixel-ratio: 2), not all
.operations-templet .block-list .border-bottom:after {
    border: none;
    background-image: -webkit-linear-gradient(90deg,#e1e1e1,#e1e1e1 50%,transparent 50%);
    background-image: -moz-linear-gradient(90deg,#e1e1e1,#e1e1e1 50%,transparent 50%);
    background-image: -o-linear-gradient(90deg,#e1e1e1,#e1e1e1 50%,transparent 50%);
    background-image: linear-gradient(0,#e1e1e1,#e1e1e1 50%,transparent 50%);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: bottom;
}
.operations-templet .block-list .border-bottom:after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 1px;
    z-index: 10;
    border-bottom: 1px solid #e1e1e1;
}

 

 以上就是详解移动端页面细线实现方案的内容，更多相关内容请关注PHP中文网（www.php.cn）！