7種方法實作移動端Retina螢幕1px邊框效果

　　在Reina（視網膜）螢幕的手機上，使用CSS設定的1px的邊框實際會比視覺稿粗很多。在之前的項目中，UI告訴我說我們移動項目中的邊框全部都變粗了，UI把他的設計稿跟我的螢幕截圖跟我看，居然真的不一樣。沒有辦法，隻有在後面的版本中去修改了，但是要改的話，需要知道是為什麼。是以查了很多資料，終于搞懂了這個問題，并且總結了幾種方法。

其實這個原因很簡單，因為css中的1px并不等于移動裝置的1px，這些由于不同的手機有不同的像素密度。在window對象中有一個devicePixelRatio屬性，他可以反應css中的像素與裝置的像素比。

devicePixelRatio的官方的定義為：裝置實體像素和裝置獨立像素的比例，也就是 devicePixelRatio = 實體像素 / 獨立像素。

在2014年的 WWDC，“設計響應的Web體驗” 一講中，Ted O’Connor 講到關于“retina

hairlines”（retina 極細的線）：在retina屏上僅僅顯示1實體像素的邊框，開發者應該如何處理呢。

他們曾介紹到 iOS 8 和 OS X Yosemite 即将支援 0.5px 的邊框：

0.5px邊框

額的神呐！so easy! 果真如此嗎？

這樣還不夠（WWDC幻燈片通常是“唬人”的），但是相差不多。

問題是 retina 屏的浏覽器可能不認識0.5px的邊框，将會把它解釋成0px，沒有邊框。包括 iOS 7 和之前版本，OS X Mavericks 及以前版本，還有 Android 裝置。

解決方案：

解決方案是通過 JavaScript 檢測浏覽器能否處理0.5px的邊框，如果可以，給html标簽元素添加個class。

然後，極細的邊框樣式就容易了：

優點：

簡單，不需要過多代碼。

缺點：

無法相容安卓裝置、 iOS 8 以下裝置。

準備一張符合你要求的border-image：

底部邊框

樣式設定：

上文是把border設定在邊框的底部，是以使用的圖檔是2px高，上部的1px顔色為透明，下部的1px使用視覺規定的border的顔色。如果邊框底部和頂部同時需要border，可以使用下面的border-image：

上下邊框

到目前為止，我們已經能在iphone上展現1px border的效果了。但是我們發現這樣的方法在非視網膜屏上會出現border顯示不出來的現象，于是使用Media Query做了一些相容，樣式設定如下：

可以設定單條,多條邊框

沒有性能瓶頸的問題

修改顔色麻煩, 需要替換圖檔

圓角需要特殊處理，并且邊緣會模糊

background-image 跟border-image的方法一樣，你要先準備一張符合你要求的圖檔。然後将邊框模拟在背景上。

與background-image方案類似，隻是将圖檔替換為css3漸變。設定1px的漸變背景，50%有顔色，50%透明。

可以實作單條、多條邊框

邊框的顔色随意設定

代碼量不少

圓角沒法實作

多背景圖檔有相容性問題

利用css 對陰影處理的方式實作0.5px的效果

代碼量少

可以滿足所有場景

邊框有陰影，顔色變淺

同時通過設定對應viewport的rem基準值，這種方式就可以像以前一樣輕松愉快的寫1px了。

在devicePixelRatio = 2 時，輸出viewport：

在devicePixelRatio = 3 時，輸出viewport：

這種相容方案相對比較完美，适合新的項目，老的項目修改成本過大。

所有場景都能滿足

一套代碼，可以相容基本所有布局

老項目修改代價過大，隻适用于新項目

對于老項目，有沒有什麼辦法能相容1px的尴尬問題了，個人認為僞類+transform是比較完美的方法了。

原理是把原先元素的 border 去掉，然後利用 :before 或者 :after 重做 border ，并 transform 的 scale 縮小一半，原先的元素相對定位，新做的 border 絕對定位。

單條border樣式設定：

四條boder樣式設定:

最好在使用前也判斷一下，結合 JS 代碼，判斷是否 Retina 屏：

支援圓角(僞類和本體類都需要加border-radius)

對于已經使用僞類的元素(例如clearfix)，可能需要多層嵌套

<a href="http://efe.baidu.com/blog/1px-on-retina/" target="_blank">《1px on retina》</a>

<a href="http://www.ghugo.com/css-retina-hairline/" target="_blank">《再談mobile web retina 下 1px 邊框解決方案》</a>

<a href="http://jinlong.github.io/2015/05/24/css-retina-hairlines/" target="_blank">《Retina屏的移動裝置如何實作真正1px的線？》</a>

<a href="http://imweb.io/topic/55e3d402771670e207a16bd1" target="_blank">《在retina屏中實作1px border效果》</a>

您可能感興趣的相關文章

<a href="http://www.cnblogs.com/lhb25/p/amazing-jquery-effects.html" target="_blank">網站開發中很有用的 jQuery 效果【附源碼】</a>

<a href="http://www.cnblogs.com/lhb25/archive/2011/11/22/best-awesome-css3-animation-demos.html" target="_blank">分享35個讓人驚訝的 CSS3 動畫效果示範</a>

<a href="http://www.yyyweb.com/492.html" target="_blank">十分驚豔的8個 HTML5 &amp; JavaScript 特效</a>

<a href="http://www.cnblogs.com/lhb25/p/10-useful-web-effect.html">Web 開發中很實用的10個效果【源碼下載下傳】</a>

<a href="http://www.cnblogs.com/lhb25/archive/2013/01/06/jquery-image-carousel-effect.html" target="_blank">12款經典的白富美型 jQuery 圖檔輪播插件</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25/p/must-read-links-for-web-designers-and-developers-volume-12.html">Web 前端工程師和設計師必讀精華文章推薦</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/07/28/html5-awesome-single-page-sites-inspiration.html" target="_blank">酷！15個精美的 HTML5 單頁網站作品欣賞</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/11/22/best-awesome-css3-animation-demos.html">炫！35個讓人驚訝的 CSS3 動畫效果示範</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2012/03/02/30-mind-blowing-parallax-scrolling-effect-websites.html" target="_blank">贊！30個與衆不同的優秀視差滾動效果網站</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2012/01/13/25-outstanding-single-page-website-designs.html">靓！25個優秀的國外單頁網站設計作品欣賞</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/08/09/awesome-html5-and-javascript-effects.html">帥！8個驚豔的 HTML5 和 JavaScript 特效</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/06/27/35-exclusive-rainbow-colored-flash-websites.html" target="_blank">頂！35個很漂亮的國外 Flash 網站作品欣賞</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/08/24/outstanding-admin-panels-part-one.html" target="_blank">哇！34個漂亮網站和應用程式背景管理界面</a>

<a href="http://www.yyyweb.com/go/web" target="_blank">本部落格新站點 ◆ 前端裡 ◆ 歡迎圍觀：）</a>

歡迎任何形式的轉載，但請務必注明出處。