射雞師給你設(shè)計圖是這樣的！

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：國際域名空間、虛擬空間、營銷軟件、網(wǎng)站建設(shè)、臨潁網(wǎng)站維護、網(wǎng)站推廣。

然后你 boder：1px solid #ccc，然后到手機上一看，又粗又大，又長

然后，測試的妹子，受不了了……

然后，你說是的啊
……

于是，你一張圖片上去一看……

確實，不對呀！

<img src="img/bg.png" style="position: fixed;top:0;left: 0;width: 100%;z-index: 999;opacity: .5;">

然后，怎么辦了呢

第一：你想到的是：

設(shè)計圖是750px，然后在iphon6上顯示是375px

因為retina下1個 CSS 像素對應(yīng)2個物理像素(多數(shù)是2個), 那么我們只需要想辦法把border的寬度變?yōu)?.5px, 那么展現(xiàn)就是1個物理像素了.

那我設(shè)置

@media (min--moz-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 144dpi), (min-resolution: 2dppx), (-ms-high-contrast:active), (-ms-high-contrast:none) {
    *{
        border-width: .5px;
    }
}

然后，其它屏幕，不整除呢……0.x0x px

^^

這個有點扯蛋：：因為，像素的定義：1px，就是顯示的最小單位

定義：

像素是指基本原色素及其灰度的基本編碼。[1]  像素是構(gòu)成數(shù)碼影像的基本單元，通常以像素每英寸PPI（pixels per inch）為單位來表示影像分辨率的大小。

例如300x300PPI分辨率，即表示水平方向與垂直方向上每英寸長度上的像素數(shù)都是300，也可表示為一平方英寸內(nèi)有9萬（300x300）像素。[2]

巴拉拉，省去ｘｘｘｘ萬字哈……

我不喜歡科普哈！?。?/p>

然后，又怎么辦呢！

我用圖片：

1.BASE64:2像素圖片，里面只有像素；

  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAAXNSR…h(huán)ZcwAADsMAAA7DAcdvqGQAAAAQSURBVBhXY5g5c+Z/BhAAABRcAsvqBShzAAAAAElFTkSuQmCC);  
  background-position: 0 0;   
  background-repeat: repeat-x;   
  background-size: 1px 1px;

2.漸變背景圖片：

.border_top {   background-image: -webkit-linear-gradient(right,transparent 50%,#999 50%);   background-image: linear-gradient(to right,transparent 50%,#999 50%);   background-size: 1px 100%;   background-repeat: no-repeat;   background-position: center right;   border-top: 0 none;   padding-top: 1px; }

//下面是sass版本

@mixin boderHash($color:#efefef,$direction:"all"){
    background-repeat: no-repeat;
    @if($direction=="all"){
        border:none;
        padding: 1px;
        background-image:
                -webkit-linear-gradient(top, $color 50%, #999 50%),
                -webkit-linear-gradient(right, transparent 50%, $color 50%),
                -webkit-linear-gradient(bottom, transparent 50%, $color 50%),
                -webkit-linear-gradient(left, transparent 50%, $color 50%);
        background-image:
                linear-gradient(to top, transparent 50%, $color 50%),
                linear-gradient(to right, transparent 50%, $color 50%),
                linear-gradient(to bottom, transparent 50%, $color 50%),
                linear-gradient(to left,transparent 50%, $color 50%);
        background-size:
                100% 1px,
                1px 100%,
                100% 1px,
                1px 100%;
        background-position:
                top center,
                right center,
                bottom center,
                left center;

    }@else {
        border-#{$direction}: 1px solid ;
        background-image: -webkit-linear-gradient($direction, transparent 50%, $color 50%);
        background-image: linear-gradient(to $direction, transparent 50%, $color 50%);
        @if($direction=="left" or $direction=="right"){
            background-size: 100% 1px;
        }
        @if $direction=="top" or $direction=="bottom"{
            background-size:   1px 100% ;
        }


    }
}

第三：使用，偽類元素。

然后絕對定位：個人覺得性能消耗太大1

所以也不不再唧唧歪歪

其實：

我們知道的網(wǎng)站。都沒有使用這些東西

不想，看圖

如果有人叼你?。?/p>

你直接那這些圖，干她！！

轉(zhuǎn)載請注明文章來處：Retina真實還原1px邊框的解決方案 - css3,css3動畫,css3新特性 - 周陸軍的個人網(wǎng)站

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站標(biāo)題：Retina真實還原1px邊框的解決方案-創(chuàng)新互聯(lián)
本文URL：http://chinadenli.net/article24/ddehce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計、網(wǎng)站維護、全網(wǎng)營銷推廣、建站公司、ChatGPT、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)