移动端 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;
}