射鸡师给你设计图是这样的！

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

然后，测试的妹子，受不了了……

然后，你说是的啊
……

于是，你一张图片上去一看……

确实，不对呀！

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


然后，怎么办了呢


第一：你想到的是：

设计图是750px，然后在iphon6上显示是375px

因为retina下1个 CSS 像素对应2个物理像素(多数是2个), 那么我们只需要想办法把border的宽度变为0.5px, 那么展现就是1个物理像素了.

那我设置

@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] 像素是构成数码影像的基本单元，通常以像素每英寸PPI（pixels per inch）为单位来表示影像分辨率的大小。

例如300x300PPI分辨率，即表示水平方向与垂直方向上每英寸长度上的像素数都是300，也可表示为一平方英寸内有9万（300x300）像素。[2]

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

我不喜欢科普哈！！！

然后，又怎么办呢！


我用图片：

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

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAAXNSR…hZcwAADsMAAA7DAcdvqGQAAAAQSURBVBhXY5g5c+Z/BhAAABRcAsvqBShzAAAAAElFTkSuQmCC);background-position:00;background-repeat:repeat-x;background-size:1px1px;

2.渐变背景图片：

.border_top{background-image:-webkit-linear-gradient(right,transparent50%,#99950%);background-image:linear-gradient(toright,transparent50%,#99950%);background-size:1px100%;background-repeat:no-repeat;background-position:centerright;border-top:0none;padding-top:1px;}//下面是sass版本

@mixinboderHash($color:#efefef,$direction:"all"){background-repeat:no-repeat;@if($direction=="all"){border:none;padding:1px;background-image:-webkit-linear-gradient(top,$color50%,#99950%),-webkit-linear-gradient(right,transparent50%,$color50%),-webkit-linear-gradient(bottom,transparent50%,$color50%),-webkit-linear-gradient(left,transparent50%,$color50%);background-image:linear-gradient(totop,transparent50%,$color50%),linear-gradient(toright,transparent50%,$color50%),linear-gradient(tobottom,transparent50%,$color50%),linear-gradient(toleft,transparent50%,$color50%);background-size:100%1px,1px100%,100%1px,1px100%;background-position:topcenter,rightcenter,bottomcenter,leftcenter;}@else{border-#{$direction}:1pxsolid;background-image:-webkit-linear-gradient($direction,transparent50%,$color50%);background-image:linear-gradient(to$direction,transparent50%,$color50%);@if($direction=="left"or$direction=="right"){background-size:100%1px;}@if$direction=="top"or$direction=="bottom"{background-size:1px100%;}}}

第三：使用，伪类元素。

然后绝对定位：个人觉得性能消耗太大1

所以也不不再唧唧歪歪


其实：

我们知道的网站。都没有使用这些东西

不想，看图

如果有人叼你！！

你直接那这些图，干她！！


转载请注明文章来处：Retina真实还原1px边框的解决方案 - css3,css3动画,css3新特性 - 周陆军的个人网站