开发者社区> 问答> 正文

移动端适配1px的问题

求助方案

展开
收起
问答小能手! 2021-01-15 21:02:25 1366 0
1 条回答
写回答
取消 提交回答
  • 来自昆仑山,真名陆离。

    产生原因:与DPR(devicePixelRatio)设备像素比有关,它表示默认缩放为100%的情况下,设备像素和CSS像素的比值:物理像素 /CSS像素。 目前主流的屏幕DPR=2 (iPhone 8),或者3 (iPhone 8 Plus)。拿2倍屏来说,设备的物理像素要实现1像素,而DPR=2,所以css 像素只能是 0.5。一般设计稿是按照750来设计的,它上面的1px是以750来参照的,而我们写css样式是以设备375为参照的,所以我们应该写的0.5px就好了啊! 试过了就知道,iOS 8+系统支持,安卓系统不支持。
    我常用的解决方案是 使用伪元素,为伪元素设置绝对定位,并且和父元素左上角对齐。将伪元素的长和宽先放大2倍,然后再设置一个边框,以左上角为中心,缩放到原来的0.5倍 除了这个方法之外还有使用图片代替,或者使用box-shadow代替,但是没有伪元素效果好。

    2021-01-15 21:03:10
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载