一、背景介紹：

Retina是一種新型高分辨率的顯示標準，是把更多的像素點壓縮至一塊屏幕里，從而達到更高的分辨率并提高屏幕顯示的細膩程度；同時CSS樣式表中px單位是一個相對值，并不是絕對值，實際在Retina屏幕中渲染元素的時候，會根據實際的dpr渲染對應的物理像素點，導致CSS代碼中1px高度的邊框，在實際設備瀏覽器渲染的時候往往不是1個物理像素高度，可能是2個物理像素高度，甚至是3個物理像素高度，造成設計稿和實際開發的頁面顯示有出入，影響用戶UI體驗。

二、現有方案

現有的解決方法大概有兩種：

1.?使用1像素高度的背景圖片來設置邊框
問題點：維護成本比較高，如果變更邊框顏色，則需要重新生成新圖片。

2.?通過CSS屬性border: 0.5px來設置

問題點：存在兼容性問題，在某些設備可能無法識別0.5px，導致元素無法渲染。

三、本方案目的

本方案根據設備參數devicePixelRatio設備像素比，從而精確實現Retina屏幕下1px邊框顯示問題，同時防止顏色失真。

四、本方案效果

1.?根據不同設備的devicePixelRatio設備像素比，動態調整不同Retina屏幕下1px邊框物理像素點高度；

2.?高度還原設計稿，提高用戶UI體驗。

五、本方案實施方式

1.?在WEB頁面DOM元素解析完成后，通過JS獲取設備devicePixelRatio參數；

2.?通過JS判斷CSS樣式前綴；

3.?通過CSS函數linear-gradient()設置邊框背景，利用設備參數devicePixelRatio設置起始顏色(邊框顏色)的漸變高度比例，將結束顏色設置為透明(transparent)；

4.?設置元素backgound-size屬性；

上述代碼解讀：通過JS獲取設備參數devicePixelRatio(例如dpr為2，那么實際渲染的物理像素為2*2px，4個像素點，高度為2個像素)，利用CSS函數linear-gradient()顏色漸變，設置起始顏色(邊框顏色)漸變終點位置(即1/dpr的高度，即為1個像素高度)，設置其余背景顏色為透明，同時設置背景顏色的尺寸(background-size)。

附錄：

附錄(1) 1px實現代碼樣例

//?獲取dom元素var?divStyle?=?document.getElementsByClassName('retina-background-size')[0].style;// 常見css前綴var render = { webkit: 'webkitTransform', moz: 'MozTransform', ms: 'msTransform',??o:?'OTransform',??dafault: 'transform'};//?判斷css前綴類型var getPrefix = (() => { for(let key in render) {????if(divStyle[render[key]]?!==?undefined)?{ return key; } }})();//?設置css前綴functionfunction?stylePrefix()?{ if(getPrefix === 'dafault') { return ''; } return '-'+getPrefix+'-';};// 獲取設備像素比(dpr)var ratio = Math.floor(1 / window.devicePixelRatio * 100) / 100;var?endPosition?=?ratio?*100?+?'%';divStyle.background?=?stylePrefix()?+?'linear-gradient(bottom,?red?'?+?endPosition?+?',?transparent?'?+?endPosition?+?')?no-repeat?center?bottom';divStyle.backgroundSize = '100% 1px';

附錄(2)?上述代碼在2dpr設備生成的元素樣式表樣例

附錄(3)?2dpr設備上實際效果對比圖

附錄(4)?上述代碼在3dpr設備生成的元素樣式表樣例

附錄(5)?3dpr設備上實際效果對比圖

附錄(6)?名詞解釋說明

1. ratio是devicePixelRatio設備像素比(物理像素/設備獨立像素)保留2位小數后的值。
2.?CSS linear-gradient() 函數用于創建一個表示兩種或多種顏色線性漸變的圖片。其結果屬于數據類型，是一種特別的數據類型。
3.?Linear-gradient() 函數第一個參數指定漸變的方向或角度，后面的參數指的是漸變的顏色以及顏色起點和終點位置(第一個顏色可以省略起點位置，最后一個顏色可以省略終點位置)。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的background图片不显示_一种解决Retina屏幕1px边框显示问题的方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。