CSS 移动端 1px(线条/边框) 解决方案

由于不同的手机有不同的像素密度导致的。如果移动显示屏的分辨率始终是普通屏幕的2倍,1px的边框在devicePixelRatio=2的移动显示屏下会显示成2px,所以在高清瓶下看着1px总是感觉变胖了

小编阅读过其他作者的文章中有写 0.5px 的写法,在理论上最小的单位是 1px。 所以会出现有的设备写 0.5px 无效(没有边框)的情况。

如何使用正确的 1px单位 又能在移动设备上显示 1px 的效果呢?

本文将介绍使用 CSS3  的 transform 属性的 scale 值来解决这个问题,这也是最常用的解决方案。下方的源码中说明 1px(线条/边框) 解决方案

效果对比(图片效果有点问题,请复制下方源码查看最终效果

CSS 移动端 1px(线条/边框) 解决方案_第1张图片 CSS 移动端 1px(线条/边框) 解决方案_第2张图片

源码




    
    
    
    移动端 1px(线条/边框) 解决方案
    



边框 1px

作者:黄河爱浪 QQ:1846492969,邮箱:[email protected]

公众号:web-7258,本文原创,著作权归作者所有,转载请注明原链接及出处。

更多精彩文章,请扫下方二维码关注我的公众号

你可能感兴趣的:(css,移动端,1px,1像素,1px边框,1px线条)