移动端1像素边框问题
2017-08-01 本文已影响0人
shanshanfei
移动端1像素边框问题：
设置一个div的底部边框为 1px solid #000; 实际表现却是边框线是模糊的，或者是大于1px的。原因是：不同手机物理像素不同，对应的设备像素比不同，同样的1pxcss像素，转换成物理像素后，尺寸是不同的，所以导致了显示的差异。像图片等的显示，最好的解决方案就是为不同设备像素比的设备准备不同的图片（@1x @2x @3x）。至于1px边框。有以下几种方式实现：
- border: .5px solid #000;
- 阴影box-shadow
- 边框背景图片：border-image
- 整个元素使用带边框的背景图片
- 转换中的缩放 scale
- 利用JS根据window.devicePixelRatio分别进行判断修改根节点的fontSize，其他元素以rem为单位
参考：
https://segmentfault.com/a/1190000007604842
http://www.html-js.com/article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme%203041
https://www.jianshu.com/p/b880b48fa028（物理像素比较大，逻辑像素小）
设备像素比DPI = 物理像素 / 设备独立像素DIPs。
像素密度 PPI ：每英寸上的像素点数，值越大显示越细腻。
1px边框问题.png
