1px问题-详解

当你给一个div这样的css样式后 边框宽度为1px

.border
  height 50px
  width 50px
  margin 0 auto
  background pink
  margin-top 20px
  border 1px solid red

在手机发现 哎，怎么有点粗

这就是经典的1px问题，下面贴出我的解决方案。网上栗子很多，可自行寻找

.scale_1px{
  position:relative;
  border:none;
}
.scale_1px:after{
  content:'';
  position:absolute;
  top: 0;
  left: 0;
  border: solid 1px red;
  box-sizing: border-box; 
  width: 200%; 
  height: 200%; 
  display: inline-block;
  transform: scale(0.5); 
  transform-origin: left top; 
}

发现可以勒（图片不太明显 自己尝试下就可以看出来了）：

为什么？

物理像素

又称设备像素，指设备能控制显示的最小物理单位，只显示器上的一个个点
从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了，和屏幕尺寸大小有关，单位 pt。

逻辑像素（dip）

css样式代码使用的就是逻辑像素，指的是viewport中的一个小方格。
如果在一个设备中，物理像素与逻辑像素相等，则逻辑=物理。但是，在iphone 4以上中，物理像素是640px960px，而逻辑像素数为320480px。因此，需要使用大约4个物理像素来显示一个CSS像素

像素比

物理像素/逻辑像素

例如：iPhone6的dpr为2，物理像素750（x轴）,则它的逻辑像素为375。

所以，1px的边框在iphone6显示只是1px的css像素 4个物理像素，为实现真正1px需要缩小1倍，如果手机的dpr为3 则缩小0.333 …