- 1像素边框的问题是什么问题
- 如何解决1像素边框的问题
1. 1像素边框的问题是什么问题
物理像素:设备本身的像素,出厂即固定
逻辑像素: css像素,viewport上的一个小方格
像素比: 如果物理像素和逻辑像素是 1:1 时,表示一个物理像素显示一个css像素
当比例为 2:1 时,表示4个物理像素显示1个css像素
【通过js的window.devicePixelRatio来获取 OR 通过媒体查询的 -webkit-min-device-pixel-ratio 来获取】
css中1px的长度在2倍屏或3倍屏上,被映射到物理像素上有2px或3px长
2. 如何解决1像素边框的问题
1. 媒体查询
查询 -webkit-min-device-pixel-ratio
2. transform: scale(0.5) 方案 - 推荐: 很灵活
缩放元素为原来的一半
3. 媒体查询+transform
显示屏最小像素比是 2.5 时:
width 和 height 是什么意思???
自己实例的时候,没看出来区别。。。