本片文章主要解決了五種解決1px 的問題临庇，上代碼之前我們先了解一下 什么是：物理像素零截、設(shè)備獨(dú)立像素狠持、設(shè)備相續(xù)比 和 viewport！
物理像素瞻润、設(shè)備像素喘垂、和設(shè)備獨(dú)立像素
在css中我們一般使用px作為單位，需要注意的是绍撞，css樣式里面的px和物理像素并不是想等的正勒，css中的像素只是一個抽象的單位，在不痛的設(shè)備或不同的環(huán)境中傻铣，css中的1px所代表的物理像素是不痛的章贞，在pc端，css的1px一般的對應(yīng)著電腦屏幕的1個物理像素非洲，但在移動端鸭限，css的1px等于幾個物理像素。
物理像素
物理像素又稱為設(shè)備像素两踏，設(shè)備物理像素败京，它是顯示器最小的物理顯示單位，每個物理像素由顏色值和亮度值組成梦染，所謂的一倍屏赡麦，二倍屏，三倍屏帕识，指的是設(shè)備以多少物理像素來顯示一個css像素泛粹，也就是說，多倍屏以更多精細(xì)的物理像素點(diǎn)來顯示一個css像素點(diǎn)肮疗，在普通屏幕下1個css像素對應(yīng)1個物理像素晶姊，而在Retina屏幕下，1個css像素對應(yīng)的卻是4個物理像素
設(shè)備獨(dú)立像素(device-independent pixel)
設(shè)備獨(dú)立像素又被稱為CSS像素伪货，是我們寫CSS時(shí)所用的像素们衙，它是一個抽像的單位，主要使用在瀏覽器上超歌，用來精確度量Web頁面上的內(nèi)容砍艾。
設(shè)備像素比(device pixel ratio)
設(shè)備像素比簡稱為dpr，定義了物理像素和設(shè)備獨(dú)立像素的對應(yīng)關(guān)系：設(shè)備像素比 ＝ 物理像素 / 設(shè)備獨(dú)立像素巍举。
CSS的1px等于幾個物理像素脆荷，除了和屏幕像素密度dpr有關(guān)，還和用戶縮放有關(guān)系。例如蜓谋，當(dāng)用戶把頁面放大一倍梦皮，那么CSS中1px所代表的物理像素也會增加一倍；反之把頁面縮小一倍桃焕，CSS中1px所代表的物理像素也會減少一倍剑肯。關(guān)于這點(diǎn)，在文章后面的1px細(xì)線問題部分還會講到
1px細(xì)線問題
在上文我們已經(jīng)知道观堂，CSS像素為1px寬的直線让网，對應(yīng)的物理像素是不同的，可能是2px或者3px,而設(shè)計(jì)師想要的1px寬的直線,其實(shí)就是1物理像素寬师痕。
對于CSS而言溃睹，可以認(rèn)為是border: 0.5px;，這是多倍屏下能顯示的最小單位胰坟。然而因篇，并不是所有手機(jī)瀏覽器都能識別border: 0.5px，有的系統(tǒng)里笔横，0.5px會被當(dāng)成為0px處理竞滓，那么如何1px細(xì)線問題呢？
1.使用border-image實(shí)現(xiàn)
根據(jù)需求選擇圖片吹缔，然后根據(jù)css的border-image屬性設(shè)置商佑。代碼如下：
div
{
-moz-border-image:url(/i/border.png) 30 30 stretch; /* Old Firefox */
-webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 */
-o-border-image:url(border.png) 30 30 stretch; /* Opera */
border-image:url(border.png) 30 30 stretch;
}
優(yōu)點(diǎn)：可以設(shè)置單條、多條邊框涛菠，缺點(diǎn)：更換顏色和樣式麻煩莉御，某些設(shè)備上會模糊。
2俗冻、使用background-image實(shí)現(xiàn)
background-image 跟border-image的方法一樣，你要先準(zhǔn)備一張符合你要求的圖片牍颈。優(yōu)缺點(diǎn)與border-image一樣迄薄。
.background-image-1px {
background: url(../img/line.png) repeat-x left bottom;
-webkit-background-size: 100% 1px; background-size: 100% 1px;
}
3、使用box-shadow模擬邊框
.box-shadow-1px {
box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}
優(yōu)點(diǎn)：代碼少煮岁，兼容性好讥蔽，缺點(diǎn)：邊框有陰影，顏色變淺画机。
上面三種方式效果并不是太好
4冶伞、偽元素+transform
構(gòu)建1個偽元素, border為1px, 再以transform縮放到50%。
/* 設(shè)計(jì)稿是750,采用1：100的比例,font-size為100*(100vw/750) */
.border-1px {
position: relative;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border-1px:before {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
border-top: 1px solid #D9D9D9;
color: #D9D9D9;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
優(yōu)點(diǎn)：可以滿足所有場景步氏，且修改靈活响禽，缺點(diǎn)：對于已使用偽類的元素要多層嵌套。
5、用JS計(jì)算rem基準(zhǔn)值和viewport縮放值
/* 設(shè)計(jì)稿是750,采用1：100的比例,font-size為100 * (docEl.clientWidth * dpr / 750) */
var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');
dpr = window.devicePixelRatio || 1;
rem = 100 * (docEl.clientWidth * dpr / 750);
scale = 1 / dpr;
// 設(shè)置viewport芋类，進(jìn)行縮放隆嗅，達(dá)到高清效果
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
// 設(shè)置data-dpr屬性，留作的css hack之用侯繁，解決圖片模糊問題和1px細(xì)線問題
docEl.setAttribute('data-dpr', dpr);
// 動態(tài)寫入樣式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';
用JS根據(jù)屏幕尺寸和dpr精確地設(shè)置不同屏幕所應(yīng)有的rem基準(zhǔn)值和initial-scale縮放值胖喳，這個JS方案已經(jīng)在完美解決了1px細(xì)線問題
參考鏈接: https://www.cnblogs.com/superlizhao/p/8729190.html
https://blog.csdn.net/yexudengzhidao/article/details/98480173
