本文介紹了解決移動(dòng)端1px邊框問題的5種方法。當(dāng)然了，在這之前先整理了與這些方法相關(guān)的知識(shí)：物理像素、設(shè)備獨(dú)立像素、設(shè)備像素比和viewport。

物理像素、設(shè)備獨(dú)立像素和設(shè)備像素比

在CSS中我們一般使用px作為單位，需要注意的是，CSS樣式里面的px和物理像素并不是相等的。CSS中的像素只是一個(gè)抽象的單位，在不同的設(shè)備或不同的環(huán)境中，CSS中的1px所代表的物理像素是不同的。在PC端，CSS的1px一般對(duì)應(yīng)著電腦屏幕的1個(gè)物理像素，但在移動(dòng)端，CSS的1px等于幾個(gè)物理像素。

物理像素(physical pixel)

物理像素又被稱為設(shè)備像素、設(shè)備物理像素，它是顯示器（電腦、手機(jī)屏幕）最小的物理顯示單位，每個(gè)物理像素由顏色值和亮度值組成。所謂的一倍屏、二倍屏(Retina)、三倍屏，指的是設(shè)備以多少物理像素來顯示一個(gè)CSS像素，也就是說，多倍屏以更多更精細(xì)的物理像素點(diǎn)來顯示一個(gè)CSS像素點(diǎn)，在普通屏幕下1個(gè)CSS像素對(duì)應(yīng)1個(gè)物理像素，而在Retina屏幕下，1個(gè)CSS像素對(duì)應(yīng)的卻是4個(gè)物理像素（參照下文田字示意圖理解）。

設(shè)備獨(dú)立像素(device-independent pixel)

設(shè)備獨(dú)立像素又被稱為CSS像素，是我們寫CSS時(shí)所用的像素，它是一個(gè)抽像的單位，主要使用在瀏覽器上，用來精確度量Web頁面上的內(nèi)容。

設(shè)備像素比(device pixel ratio)

設(shè)備像素比簡稱為dpr，定義了物理像素和設(shè)備獨(dú)立像素的對(duì)應(yīng)關(guān)系：設(shè)備像素比 ＝ 物理像素 / 設(shè)備獨(dú)立像素。

CSS的1px等于幾個(gè)物理像素，除了和屏幕像素密度dpr有關(guān)，還和用戶縮放有關(guān)系。例如，當(dāng)用戶把頁面放大一倍，那么CSS中1px所代表的物理像素也會(huì)增加一倍；反之把頁面縮小一倍，CSS中1px所代表的物理像素也會(huì)減少一倍。關(guān)于這點(diǎn)，在文章后面的1px細(xì)線問題部分還會(huì)講到。

1px細(xì)線問題

在上文我們已經(jīng)知道，CSS像素為1px寬的直線，對(duì)應(yīng)的物理像素是不同的，可能是2px或者3px,而設(shè)計(jì)師想要的1px寬的直線,其實(shí)就是1物理像素寬。

對(duì)于CSS而言，可以認(rèn)為是border: 0.5px;，這是多倍屏下能顯示的最小單位。然而，并不是所有手機(jī)瀏覽器都能識(shí)別border: 0.5px，有的系統(tǒng)里，0.5px會(huì)被當(dāng)成為0px處理，那么如何1px細(xì)線問題呢？

使用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è)備上會(huì)模糊。

使用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;
}

使用box-shadow模擬邊框

 .box-shadow-1px {
   box-shadow: inset 0px -1px 1px -1px #c8c7cc;
 }

優(yōu)點(diǎn)：代碼少，兼容性好。缺點(diǎn)：邊框有陰影，顏色變淺。

上面三種方式效果并不是太好

偽元素+transform

構(gòu)建1個(gè)偽元素, 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)：對(duì)于已使用偽類的元素要多層嵌套。

用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);
// 動(dòng)態(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縮放值，這個(gè)JS方案已經(jīng)在完美解決了1px細(xì)線問題

到此這篇關(guān)于解決移動(dòng)端1px邊框問題的幾種方法(5種)的文章就介紹到這了,更多相關(guān)移動(dòng)端1px邊框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論