公司的設(shè)計(jì)師在做設(shè)計(jì)圖的時(shí)候都是以iphone6（寬為750物理像素）為基準(zhǔn)進(jìn)行設(shè)計(jì)的。iphone6的設(shè)備像素比（即css像素與物理像素的比例）是2，所以設(shè)計(jì)師在設(shè)計(jì)圖畫(huà)了邊框?yàn)?px的box的時(shí)候，相對(duì)于css代碼來(lái)說(shuō)就是0.5像素。

對(duì)于這個(gè)問(wèn)題，最直觀的方法就是css直接設(shè)置邊框?yàn)?.5px，經(jīng)過(guò)測(cè)試，iPhone可以正常顯示，android下幾乎所有的瀏覽器都會(huì)把0.5識(shí)別為0，即無(wú)邊框狀態(tài)，所以這種方式行不通

CSS3有縮放的屬性，我們可以利用這個(gè)屬性，縮小50%的1px的邊框，來(lái)實(shí)現(xiàn)這個(gè)功能，具體實(shí)現(xiàn)代碼如下

<div class="border3">    <div class="content">偽類(lèi)設(shè)置的邊框</div></div>  

css:

.border3{     position: relative;           } .border3:before{       content: '';       position: absolute;       width: 200%;       height: 200%;       border: 1px solid red;       -webkit-transform-origin: 0 0;       -moz-transform-origin: 0 0;       -ms-transform-origin: 0 0;       -o-transform-origin: 0 0;       transform-origin: 0 0;       -webkit-transform: scale(0.5, 0.5);       -ms-transform: scale(0.5, 0.5);       -o-transform: scale(0.5, 0.5);       transform: scale(0.5, 0.5);       -webkit-box-sizing: border-box;       -moz-box-sizing: border-box;       box-sizing: border-box;} 

實(shí)現(xiàn)思路：

1、設(shè)定目標(biāo)元素的參考位置

2、給目標(biāo)元素添加一個(gè)偽元素before或者after，并設(shè)置絕對(duì)定位

3、給偽元素添加1px的邊框

4、用box-sizing: border-box 屬性把邊框都包進(jìn)寬和高里面

5、寬和高設(shè)置為 200%

6、整個(gè)盒子模型縮小為0.5

7、調(diào)整盒子模型的位置，以左上角為基準(zhǔn) transform-origin: 0 0;

實(shí)現(xiàn)結(jié)果在iphone顯示如下：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。