業(yè)務(wù)中碰到了一個厲害的 UI 妹紙, 因為邊框的 1px border 會被渲染成 2px(物理像素), 因此看起來會比較粗甫窟，問題抓了我很久, , UI 妹紙就說不行! 一定要改!你可以那下面的圖干她碑幅。說，你看到?jīng)]有褒傅，改毛線啊@５鞘А＞材帷莺褒！
射雞師給你設(shè)計圖是這樣的掩缓！
然后你 boder：1px solid #ccc，然后到手機上一看遵岩，又粗又大你辣，又長
然后巡通，測試的妹子，受不了了……
然后舍哄，你說是的啊
……
于是宴凉，你一張圖片上去一看……
確實，不對呀表悬！
然后弥锄，怎么辦了呢
第一：你想到的是：
設(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]
巴拉拉，省去ｘｘｘｘ萬字哈……
我不喜歡科普哈Ｎ忱琛７尽！
然后本今，又怎么辦呢拆座！
我用圖片：
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)站逛艰。都沒有使用這些東西
不想躏碳，看圖
如果有人叼你！散怖！
你直接那這些圖菇绵，干她！镇眷！
轉(zhuǎn)載請注明文章來處：Retina真實還原1px邊框的解決方案 - css3,css3動畫,css3新特性 - 周陸軍的個人網(wǎng)站
