移動端高清屏 1px 解決方案

admin發表於2019-04-23
很多時候按部就班的操作可能並不能達到理想的效果，此現象尤其讓新手迷惑。
比如在移動端高清屏上設定1px尺寸的邊框效果，雖然程式碼正確，但是並不能讓人滿意。

首先看如下程式碼片段：

[CSS] 純文字檢視 複製程式碼
div {
  width:5rem;
  height:2rem;
  border:1px solid red;
}

上述程式碼實在太簡單了，設定div的長和寬，最後設定其邊框的尺寸1px。

雖然程式碼在語法上沒有任何問題，但是實際效果可能難以讓人滿意，甚至難過公司UI這一關。

丟擲的原因大致是"邊框太粗了"，確實有點讓人迷惑，目的是設定邊框為1px，程式碼也是如此設定。

一.邊框過粗原因分析如下：

首先強調一點，上述程式碼設定邊框為1px在語法上沒有任何問題，在高清屏上顯示的確也是1px尺寸。

但是在web中存在多種畫素，具體可以參閱裝置畫素、獨立畫素和css畫素一章節。

程式碼中設定的是CSS畫素，但是在高清屏中，一個CSS畫素並不等於一個裝置畫素，這是原因所在。

當前的智慧手機絕大多數都是高清屏，1CSS畫素可能佔用4個物理畫素，或者更多。

簡單圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201904/23/163859o87s2lb29qb66e9s.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上圖描述的是1CSS畫素佔用4個裝置畫素的體積，在實際專案中最好設定為1px裝置畫素。

二.解決方案如下：

既然知道了其中原理，那自然就可以給出相應的解決方案，方式有多種。

1.使用小數表示邊框：

比如可以設定邊框的CSS畫素值為0.5，確實是一種比較簡便的方式。

但是當前還存在一定的瀏覽器相容性問題，也許未來這一些都會發生變化。

程式碼片段你如下：

[CSS] 純文字檢視 複製程式碼
.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
  .border { border: 0.333333px solid #999 }
}

上述程式碼簡單分析如下：

（1）.上述程式碼採用媒體查詢方式，如果在非高清屏，則設定邊框為1px。

（2）.如果是高清屏，且dpr等於2，那麼設定邊框為0.5px。

（3）.如果是高清屏，且dpr等於3，那麼設定邊框為0.333333px。

上面是基本的數學問題，不再做進一步介紹，媒體查詢知識參閱CSS @media 媒體查詢一章節。

2.border-image屬性方式：

第一種方式具有一定的瀏覽器相容性，如果要求嚴格，可以採用下面方式。

會涉及到CSS3的border-image，具體可以參閱CSS border-image一章節。

採用如下圖片作為示範：

a:3:{s:3:\"pic\";s:43:\"portal/201904/23/164013fe6r1ppxg8klv84v.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述圖片簡單說明如下：

（1）.圖片的長度和寬度都是6px。

（2）.圖片具有黑色和透明兩部分（白色區域表示透明），黑色部分則是要我們真正要顯示的邊框。

下面是一段程式碼片段可以實現1px裝置畫素邊框效果：

[CSS] 純文字檢視 複製程式碼
@media screen and (-webkit-min-device-pixel-ratio: 2){
  .border{
    border: 1px solid transparent;
    border-image: url(border.gif) 2 repeat;
  }
}

上述程式碼分析如下：

（1）.通過媒體查詢判斷當前螢幕是否是dpr等於2的高清螢幕。

（2）.如果dpr等2，那麼首先設定元素的邊框為1px。

（3）.最後通過border-image屬性將圖片由外向內切割2px，一半為黑，一半為透明。

（4）.也就是將2px的圖片壓縮到1px的容器內，原來黑色部分為1px，經過壓縮之後變為0.5px。

3.flexible.js外掛：

此外掛首先會檢測當前螢幕的dpr，然後再進行相應的縮放，以此達到1px裝置畫素顯示效果。

在安卓機器上可能有一些問題，因為安卓機的一些關鍵屬性的返回值多種多樣。

關於此方案具體內容可以參閱rem移動端適配一章節。

4.通過CSS3縮放：

此種方式相當的簡單，程式碼片段如下：

上述程式碼簡單分析如下：

[CSS] 純文字檢視 複製程式碼
.radius-border{
  position: relative;
}
@media screen and (-webkit-min-device-pixel-ratio: 2){
  .radius-border:before{
    content: "";
    pointer-events: none; /* 防止點選觸發 */
    box-sizing: border-box;
    position: absolute;
    width: 200%;
    height: 200%;
    left: 0;
    top: 0;
    border-radius: 8px;
    border:1px solid #999;
    transform:scale(0.5);
    transform-origin: 0 0;
    }
}

對上述程式碼片段分析如下：

（1）.通過偽元素選擇器建立一個偽元素，邊框為1px，並且將尺寸設定為父元素的2倍。

（2）.然後在通過transform:scale將元素縮小到百分之50，這樣就做到了將邊框設定為1裝置畫素的效果。

相關文章