標籤：方法 前端 心態 協助 高度 體驗 meta copy 經曆
最近和一個朋友聊天，朋友吐露了工作上的一些不開心，說自己總是喜歡跟別人比較，活得比較累，這種感覺大部分人經曆過，往往覺得是自己心態不好，其實不然，這是人性，此時應該快速擺脫這種狀態，想到DOTA大9神的筆錄，遊戲也是人生，懂得思考的人生才會不斷促使自己進步，詳細我不清楚了，大概意思是這樣：人這一輩子就一次，快樂很重要，人如何感受到快樂，說起來真的不難，有兩個點，一點是“你能夠讓別人喜歡你”；另外一點是“跟好朋友一起時你能夠卸下面具”，是怎麼樣的就怎麼樣。希望能給不開心的同學尋找一絲協助~
回到今天的主題.5px(0.5px簡寫為.5px)，可能大家聽過.9，它是android平台應用軟體開發裡的一種特殊圖片形式，本文的.5指如何使用css實現.5px的線條~
目錄你可能不知道的.5px
移動web設計中，在retina顯示屏下網頁會由1px會被渲染為2px，那麼視覺稿中1px的線條還原成網頁需要css定義為.5px。文章開頭的漫畫中，細心的設計師發現粗線條並吐槽，前端哥的理由是因為css的border-width不支援.5px，所以用了1px來替代，最終渲染為2px的粗線條，這個問題往往會被忽視，從而導致移動網頁中普遍存在2px的粗線條。
retina下的網頁1px被渲染為2px(甚至是3px，例如iPhone 6 Plus)，可參考的文章《高清顯示屏原理及設計方案》
錯誤案例示範：-AA收款-詳情頁按鈕，視覺稿給過來的按鈕邊框是1px，重構上線後按鈕邊框是2px。
此問題已最佳化，如何?請往下看。
border值不支援.5px嗎
有部分同學使用boder-width:.5px後，在PC或者頁面頁面看不到.5px的邊框(ios 8系統已完美支援border-width值0.5px線條)，會認為border-width不支援.5px，是不是這樣，我們先做個實驗。
首先開啟連結或者掃描二維碼，體驗demo
http://peunzhang.github.io/demo/d5px/border.html
可以看出.5px的border在chrome瀏覽器上不顯示線條，如：
調大chrome解析度後，.5px的border在PC瀏覽器上顯示出線條，如：
.5px的border在iPhone 6 plus下顯示出線條，如：
.5px的border在三星galaxy s4 android 5.0.1下不顯示線條，如：
其它裝置就不一一，有興趣的請測試，有驚喜，簡單整理如下表格：
實驗結果參考
另外，本文也對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等，這裡不做介紹(百度或者Google“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>
http://1.peunzhang.sinaapp.com/demo/d5px/border-radius.html
如果你在chrome開啟，會發現縮放線條會導致邊框顏色變淺，但大家可以放心使用，因為在大部分行動裝置(相對高端)的顏色還是正常的。
趕在七夕前的一篇文章，願天下有情人終成眷屬 ?
【原】移動web點5像素的秘密
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
