初识1px

学习前端方向也有一段时间了，起初作过一些项目，老是发现作完以后本身的边框会变得比较粗，后面翻阅了部分资料慢慢的才了解了这个问题，大体列举了几种解决的办法。css

形成边框变粗的缘由

在window对象中有一个devicePixelRatio属性，他能够反应css中的像素与设备的像素比。然而1px在不一样的移动设备上都等于这个移动设备的1px，这是由于不一样的移动设备有不一样的像素密度。有关这个属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是
html

devicePixelRatio = 物理像素 / 独立像素复制代码

还记不记得移动端html的header这句话
前端

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">复制代码

这句话定义了本页面的viewport的宽度为设备宽度,初始缩放值和最大缩放值都为1,并禁止了用户缩放.
手机存在一个能完美适配的理想viewport, 分辨率相差很大的手机的理想viewport的宽度多是同样的, 这样作的目的是为了保证一样的css在不一样屏幕下的显示效果是一致的, 上面的meta其实是设置了ideal viewport的宽度.
以实际举例: iphone3和iphone4的屏幕宽度分别是320px,640px, 可是它们的ideal viewport的宽度都是320px, 设置了设备宽度后, 320px宽的元素都能100%的填充满屏幕宽. 不一样手机的ideal viewport宽度是不同的, 常见的有320px, 360px, 384px. iphone系列的这个值在6以前都是320px, 控制viewport的好处就在于一套css能够适配多个机型.git

看懂的人应该已经明白 1px变粗的缘由了, viewport的设置和屏幕物理分辨率是按比例而不是相同的. 移动端window对象有个devicePixelRatio属性, 它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3, css里写的1px长度映射到物理像素上就有2px或3px那么长.谈到这里那么就会有人问，有哪些解决的办法呢？github

1px的解决办法

伪类+`transform`实现

对于解决1px边框问题，我我的以为最完美的解决办法仍是伪类+transform比较好。
原理：是把原先元素的 border 去掉，而后利用 :before 或者 :after 重作 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新作的 border 绝对定位。 web

单条border样式设置markdown

.scale{
  position: relative;
  border:none;
}
.scale:after{
  content: '';
  position: absolute;
  bottom: 0;
  background: #000;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}复制代码

四条boder样式设置:iphone

.scale{
  position: relative;
  margin-bottom: 20px;
  border:none;
}
.scale:after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #000;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 200%;
  height: 200%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: left top;
  transform-origin: left top;
}复制代码

最好在使用前也判断一下，结合 JS 代码，判断是否 Retina 屏 ide

if(window.devicePixelRatio && devicePixelRatio >= 2){
  document.querySelector('ul').className = 'scale';
}复制代码

flexible.js

这是淘宝移动端采起的方案, github的地址:github.com/amfe/lib-fl…. 前面已经说过1px变粗的缘由就在于一刀切的设置viewport宽度, 若是能把viewport宽度设置为实际的设备物理宽度, css里的1px不就等于实际1px长了么. flexible.js就是这样干的. oop

里面的scale值指的是对ideal viewport的缩放, flexible.js检测到IOS机型, 会算出scale = 1/devicePixelRatio, 而后设置viewport

metaEl = doc.createElement('meta');
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');复制代码

devicePixelRatio=2时输出meta以下, 这样viewport与ideal viewport的比是0.5, 也就与设备物理像素一致

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">复制代码

在devicePixelRatio = 3 时，输出viewport

<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">复制代码

使用box-shadow模拟边框

利用css 对阴影处理的方式实现0.5px的效果

.box-shadow-1px {
  box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}复制代码