【原】移動web點5像素的祕密

時間 2019-11-12

標籤移動 web 像素祕密欄目無線简体版

原文原文鏈接

最近和一個朋友聊天，朋友吐露了工做上的一些不開心，說本身老是喜歡跟別人比較，活得比較累，這種感受大部分人經歷過，每每以爲是本身心態很差，其實否則，這是人性，此時應該快速擺脫這種狀態，想到DOTA大9神的筆錄，遊戲也是人生，懂得思考的人生纔會不斷促使本身進步，詳細我不清楚了，大概意思是這樣：人這一生就一次，快樂很重要，人如何感覺到快樂，提及來真的不難，有兩個點，一點是「你可以讓別人喜歡你」；另一點是「跟好朋友一塊兒時你可以卸下面具」，是怎麼樣的就怎麼樣。但願能給不開心的同窗尋找一絲幫助~css

回到今天的主題.5px(0.5px簡寫爲.5px)，可能你們聽過.9，它是android平臺應用軟件開發裏的一種特殊圖片形式，本文的.5指如何使用css實現.5px的線條~html

移動web設計中，在retina顯示屏下網頁會由1px會被渲染爲2px，那麼視覺稿中1px的線條還原成網頁須要css定義爲.5px。文章開頭的漫畫中，細心的設計師發現粗線條並吐槽，前端哥的理由是由於css的border-width不支持.5px，因此用了1px來替代，最終渲染爲2px的粗線條，這個問題每每會被忽視，從而致使移動網頁中廣泛存在2px的粗線條。前端

retina下的網頁1px被渲染爲2px(甚至是3px，例如iPhone 6 Plus)，可參考的文章《高清顯示屏原理及設計方案》android

錯誤案例示範：微信-AA收款-詳情頁按鈕，視覺稿給過來的按鈕邊框是1px，重構上線後按鈕邊框是2px。
ios

此問題已優化，如何實現請往下看。git

border值不支持.5px嗎

有部分同窗使用boder-width:.5px後，在PC或者頁面頁面看不到.5px的邊框(ios 8系統已完美支持border-width值0.5px線條)，會認爲border-width不支持.5px，是否是這樣，咱們先作個試驗。github

首先打開連接或者掃描二維碼，體驗demoweb

http://peunzhang.github.io/demo/d5px/border.htmlchrome

能夠看出.5px的border在chrome瀏覽器上不顯示線條，以下圖：瀏覽器

調大chrome分辨率後，.5px的border在PC瀏覽器上顯示出線條，以下圖：

.5px的border在iPhone 6 plus下顯示出線條，以下圖：

.5px的border在三星galaxy s4 android 5.0.1下不顯示線條，以下圖：

其它設備就不一一截圖，有興趣的請測試，有驚喜，簡單整理以下表格：

試驗結果參考

css的border-width值支持.5px，顯示狀態受屏幕分辨率的影響
ios 8和winphone 8的設備對高清屏作了特殊處理，支持顯示border-width:.5px
android 幾乎全部的機型不支持顯示.5px的邊框

另外，本文也對height值作了試驗，結果跟border-width是同樣的，咱們還能夠試驗font-size、box-shadow等屬性。

http://peunzhang.github.io/demo/d5px/height.html

實現.5px的線條

網絡上有不少方法，如設置viewport，box-shawdow，border-image，background-image，transform:scale等，這裏不作介紹(百度或者谷歌「retina 1px 邊框」有答案)，本文只介紹一種以爲比較好用的方法，一來兼容性好，二來不依賴圖片。

transform:scale(x,y)

經過css支持定義border或者height爲.5px大的線條，在android設備中的沒法顯示出來，這裏有個小技巧，果設置線條爲1px，而後經過transform:scale(x,y)來縮放線條爲原來的一半，可顯示0.5px的線條。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>點5測試 - scale</title>
<style type="text/css">
.line {
    height: 50px;
    line-height: 50px;
    background-color: #CCC;
    border-bottom:1px solid red
} 
    
.scale {
    position: relative;
    height: 50px;
    line-height: 50px;
    background-color: #CCC
}
.scale:after {
    position: absolute;
    content: '';
    width: 100%;
    left: 0;
    bottom: 0;
    height: 1px;
    background-color: red;
    -webkit-transform: scale(1,.5);
    transform: scale(1,.5);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom
}
</style>
</head>

<body>
<div class="line">1px</div>
<br/><br/>    
<div class="scale">0.5px</div>
</body>

</html>

http://peunzhang.github.io/demo/d5px/height-scale.html

實現.5px的圓角邊框

.5px的邊框，看起來看神奇，這裏感謝藍叔提供的方法。

原理：先定義1px的圓角邊框，而後拉伸內容的寬度和高度爲父級的2倍(邊框厚度不變)，而後再使用transform:scale(0.5)縮放爲原來的0.5倍

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>點5測試 - border-radius</title>
<style type="text/css">
body{padding: 50px;-webkit-touch-callout:none;}
[class*="btn"]{margin: 0 auto;}
.btn-1 {
    width: 200px;
    height: 42px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    text-align: center;
    line-height: 42px;
    background-color: #EDEDED;
    border: 1px solid red;
}
.btn {
    position: relative;
    width: 200px;
    height: 42px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    text-align: center;
    line-height: 42px;
    background-color: #EDEDED;
}
.btn:before {
    content: '';
    position: absolute;
    top: -50%;
    bottom: -50%;
    left: -50%;
    right: -50%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    border-style: solid;
    border-width: 1px;
    border-color: red;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
</style>
</script>
</head>

<body>

<div class="btn-1">1px border</div>
<br/><br/>
<div class="btn">.5px border</div>

</body>

</html>