移动端解决1像素问题

移动端 1px 像素问题及解决办法

前言：在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在某些机型上，1px会比较粗，即是较经典的 移动端1px像素问题。

为什么会有1px问题

物理像素:
移动设备出厂时，不同设备自带的不同像素，也称硬件像素;
逻辑像素:
就是css中的像素;

解决办法

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

使用transform:scaleY

.line{
     width: 100%;
     height: 1px;
     background-color: black;
     margin-top: 100px;
     transform: scaleY(0.33333);
     transform-origin: 0 0;
 }