一、背景介紹：

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

二、現(xiàn)有方案

現(xiàn)有的解決方法大概有兩種：

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

2.?通過CSS屬性border: 0.5px來設(shè)置

問題點(diǎn)：存在兼容性問題，在某些設(shè)備可能無法識別0.5px，導(dǎo)致元素?zé)o法渲染。

三、本方案目的

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

四、本方案效果

1.?根據(jù)不同設(shè)備的devicePixelRatio設(shè)備像素比，動態(tài)調(diào)整不同Retina屏幕下1px邊框物理像素點(diǎn)高度；

2.?高度還原設(shè)計稿，提高用戶UI體驗(yàn)。

五、本方案實(shí)施方式

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

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

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

4.?設(shè)置元素backgound-size屬性；

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

附錄：

附錄(1) 1px實(shí)現(xiàn)代碼樣例

//?獲取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; } }})();//?設(shè)置css前綴functionfunction?stylePrefix()?{ if(getPrefix === 'dafault') { return ''; } return '-'+getPrefix+'-';};// 獲取設(shè)備像素比(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設(shè)備生成的元素樣式表樣例

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

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

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

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

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

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。