一像素边框的问题(使不同dpr设备完美显示1px的border)
问题:不同dpr的屏幕有不同的屋里像素值,而我们css像素的1px由于不同屏幕的渲染会导致宽度并不一样;
例如: dpr为2的retina屏幕是有四个物理像素点(真实屏幕上的点)组成一个逻辑(css)像素点。所以我们写css的1px的时候会表现出不同的宽度;
知识:
物理像素: 物理像素又被称为设备像素、设备物理像素,它是显示器(电脑、手机屏幕)最小的物理显示单位,每个物理像素由颜色值和亮度值组成。所谓的一倍屏、二倍屏(Retina
)、三倍屏,指的是设备以多少物理像素来显示一个CSS
像素,也就是说,多倍屏以更多更精细的物理像素点来显示一个CSS
像素点,在普通屏幕下1个CSS
像素对应1
个物理像素,而在Retina
屏幕下,1
个CSS像素对应的却是4
个物理像素(参照下文田字示意图理解)。
设备像素: 设备独立像素又被称为CSS
像素,是我们写CSS
时所用的像素,它是一个抽像的单位,主要使用在浏览器上,用来精确度量Web
页面上的内容。
DPR(device pixel ratio):设备像素比简称为dpr
,定义了物理像素和设备独立像素的对应关系:设备像素比 = 物理像素 / 设备独立像素。
如果我们统一写1px宽度会 在2倍屏幕上会显示成2个物理px的宽度,3倍屏幕上显示3个物理px的宽度;
解决办法:
1 伪元素+ transform
去掉原先的边框,增加新的元素
.scale-1px{ position: relative; border:none; } .scale-1px:after{ content: ''; position: absolute; bottom: 0; background: #000; width: 100%; height: 1px; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; }
有图有真相,在MacBook Pro屏幕上的效果如图
// 这里查了一下四条边框的做法 是使用transform-origin来让伪元素元素变为边框 (mdn:transform-origin
CSS属性让你更改一个元素变形的原点。)
最好在使用前也判断一下,结合 JS
代码,判断是否 Retina
屏:
2 viewport + rem 实现
同时通过设置对应viewport
的rem
基准值,这种方式就可以像以前一样轻松愉快的写1px
了。
在devicePixelRatio = 2
时,输出viewport
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no"> 三倍屏的时候 <meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">