移動webApp - 1像素實現（點5像素的秘密）

標籤：retina   webapp   介紹   ack   定義   for   處理   win   ios   

在移動web項目中，經常會實現以下1像素的邊框

移動web設計中，在retina顯示屏下網頁會由1px會被渲染為2px，那麼視覺稿中1px的線條還原成網頁需要css定義為0.5px

但是正當我們去用0.5px定於boder的時候發現css的border-width: 0.5px不起作用，那是不是真的不支援0.5px呢？

 

我們在定義0.5px的時候發現的一些問題

• css的border-width值支援.5px，但是顯示狀態受螢幕解析度的影響
• ios 8和winphone 8的裝置對高清屏做了特殊處理，支援顯示border-width:.5px
• android 幾乎所有的機型不支援顯示.5px的邊框

 

 

實現.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的線條。

<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><div class="line">1px</div><div class="scale">0.5px</div>

 

移動webApp - 1像素實現（點5像素的秘密）