公司的設計師在做設計圖的時候都是以iPhone6(寬為750物理像素)為基準進行設計的。iPhone6的設備像素比(即css像素與物理像素的比例)是2,所以設計師在設計圖畫了邊框為1px的box的時候,相對於css代碼來說就是0.5像素。
對於這個問題,最直觀的方法就是css直接設置邊框為0.5px,經過測試,iPhone可以正常顯示,android下幾乎所有的瀏覽器都會把0.5識別為0,即無邊框狀態,所以這種方式行不通
CSS3有縮放的屬性,我們可以利用這個屬性,縮小50%的1px的邊框,來實現這個功能,具體實現代碼如下
<div class="border3"> <div class="content">偽類設置的邊框</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; }
實現思路:
1、設定目標元素的參考位置
2、給目標元素添加一個偽元素before或者after,並設置絕對定位
3、給偽元素添加1px的邊框
4、用box-sizing: border-box 屬性把邊框都包進寬和高裏面
5、寬和高設置為 200%
6、整個盒子模型縮小為0.5
7、調整盒子模型的位置,以左上角為基準 transform-origin: 0 0;
實現結果在iphone顯示如下:
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持電腦玩物。
Tags: 邊框 像素 0.5 實現 border-box scale
文章來源: