移动端热点问题

1. 1px border问题

只介绍常用的两种方法

1px问题产生的原因

从移动端的角度说个具体的场景，以iphone6为例。

iphone6的屏幕宽度为375px，设计师做的视觉稿一般是750px，也就是2x，这个时候设计师在视觉稿上画了1px的边框，于是你就写了“border-width:1px”，so…1px边框问题产生了。

对设计师来说它的1px是相对于750px的（物理像素），对你来说你的1px是相对于375px的（css像素）“实际上你应该是border-width:0.5px”。

具体方案

1.用小数写边框

媒体查询，加小数的写法

.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border { border: 0.333333px solid #999 }
}

tranform加伪类标签

利用伪类标签，更具父级定位，大小更具媒体查询缩放实现效果