业务中碰到了一个厉害的 UI 妹纸, 因为边框的 1px border 会被渲染成 2px(物理像素), 因此看起来会比较粗，问题抓了我很久, , UI 妹纸就说不行! 一定要改!你可以那下面的图干她。说，你看到没有，改毛线啊@！！！

 

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

 

1px边框 手机屏幕

 

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

 

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

 

然后，你说是的啊

 

……

 

像鸡巴的岩石

 

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

 

确实，不对呀！

 

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

 

66666666.jpg

 

然后，怎么办了呢

 

第一：你想到的是：

 

设计图是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像素图片，里面只有像素；

 

border-base64 手机1px边框图片

 

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAAXNSR…hZcwAADsMAAA7DAcdvqGQAAAAQSURBVBhXY5g5c+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

 

所以也不不再唧唧歪歪