css 中的 1px 并不等于设备的 1px

在 css 中我们一般使用 px 作为单位，在浏览器中 css 的 1 个像素往往对应着电脑屏幕的 1 个物理像素，这可能会造成我们的一个错觉，那就是 css 中的像素就是设备的物理像素。但实际情况并非如此，css 中的像素只是一个抽象的单位，在不同环境中，css 中的 1px 代表的设备物理像素是不同的。

移动端 1px 变粗的原因

为什么移动端 css 里面写了 1px，实际看起来却比 1px 要粗？这里是因为 ‘px’ 的含义不一样
移动端 html 的 head 标签中总会有这样一段代码

1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

这句话定义了本页面的viewport的宽度为设备宽度,初始缩放值和最大缩放值都为 1,并禁止了用户缩放. viewport 通俗的讲是浏览器上可用来显示页面的区域, 这个区域是可能比屏幕大的
有一个因素也会引起 css 中 px 的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么 css 中 1px 所代表的物理像素也会增加一倍；反之把页面缩小一倍，css 中 1px 所代表的物理像素也会减少一倍。

解决方案

  1. 用小数点些 px 的值
1
2
3
4
.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border { border: 0.5px solid #999 }
}
  1. background 渐变

背景渐变, 渐变在透明色和边框色中间分割, frozenUI 用的就是这种方法, 借用它的上边框写法:

1
2
3
4
5
6
@media screen and (-webkit-min-device-pixel-ratio: 2){
    .ui-border-t {
        background-position: left top;
        background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.5,transparent),color-stop(0.5,#e0e0e0),to(#e0e0e0));
    }
}
  1. 使用 transform 实现

在移动端中，我们对宽度 100%，1px 的线进行改造，将其宽度设为 200%，高度不变，之后使用 transform 对其缩放 50%。

1
2
3
4
5
6
7
8
9
10
.line{
    width:200% ;
    height:1px ;
    transform:scale(.5) ;
    -ms-transform:scale(.5) ;
    -o-transform:scale(.5) ;
    -webkit-transform:scale(.5) ;
    -moz-transform:scale(.5) ;
    transform-origin:top left ;
}
  1. 利用 box-shadow也可模拟 1px 细线边框，但缺点是颜色不好控制
1
2
3
div {
    -webkit-box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5);
}