逻辑像素与物理像素

物理像素

设备屏幕实际拥有的像素点。比如一个图片,细分最小单位就是像素,也就是说图片是由许多的像素构成。

一个设备生产出来,他们的像素就已经确定了,iphone5的分辨率是640*1136px,代表屏幕的宽是640px,高是1136px。

逻辑像素

也叫“设备独立像素”(Device Independent Pixel,DPI)可以理解为反映在CSS里的像素点,也就是说CSS像素是逻辑像素的一种。

CSS像素的单位也叫PX。他是图像显示的基本单元。

CSS像素=设备独立像素=逻辑像素

 

注:

(1)为了保证阅读体验的一致性,CSS像素可以自动在不同设备之间调节

(2)默认情况下,一个CSS像素等于一个物理像素的宽度。但是在高像素密度的设备上,CSS像素甚至在默认情况下相当于多个物理像素的尺寸。比如iPhone的屏幕对比一般的手机屏幕会看起来更精细清晰一些。

(3)iPhone6,7,8都是两倍屏手机,即一个CSS像素等于两个物理像素。iPhone6Plus等于三倍屏手机,即一个CSS像素等于3个物理像素。

(4)以iPhone6为例,设计稿给出一个图片的宽高为40*40,在实际开发中要除以2,宽高要写成20*20,因为iPhone6是两倍屏手机。

 

设备像素比(Device Pixel Ratio,DPR)

表示一个设备的物理像素与逻辑像素的比。

像素为什么会有“物理”和“逻辑”之分,他们之间有什么区别?

  在很久以前,的确没有区别,CSS里写1px,屏幕就给你渲染成1个实际的像素点,所以DPR=1。

  但是后来苹果公司为其产品mac、iPhone等的屏幕配置了Retina高清屏,也就是说这种屏幕拥有的物理像素点比非高清屏多4被甚至更多。如果还按照DPR=1进行展示,那么同一张图片在高清屏上显示的区域面积会是非高清屏的1/4,这样的话图片在屏幕上的展示面积大大缩小,也就会导致看不清的问题。

  举个栗子,iPhone6的物理像素是750*1334,那么它的逻辑像素是多少? 我们只需要打印一下screen.width和screen.height就知道了,结果是375*667,这就是它的逻辑像素,所以DPR=2,我们也可以通过打印window.devicePixelRatio来获取设备像素比。

 

分辨率

也叫解析度,可以从屏幕分辨率和图像分辨率两个方向来分类。

屏幕分辨率:是屏幕图象的精密度,是指显示器所能显示的像素有多少,即显示器可以显示的小方块有多少。

  • 显示器的可显示的小方块越多,画面就越精细,同样的屏幕区域内能显示的信息也就越多。
  • 显示分辨率一定的情况下,显示屏越小图像就越清晰,反之,显示屏大小固定时,显示分辨率越高图像越清晰。(小方块一样多的情况下,显示屏越小越清晰;屏幕大小一样大的时候,小方块越多图形越清晰)

一个逻辑像素等于多少个物理像素是由设备本身决定的,可以通过DPR也就是设备像素比window.devicePixelRatio获知。

 

像素密度(PPI)

像素密度的数值越高,代表显示屏能够以越高的密度显示图像,画面的细节就会越丰富。

以Retina屏幕为例,他并不是象普通显示器那样通过增大尺寸来增加分辨率,而是靠提升屏幕单位面积内的像素数量,即像素密度来提升分辨率,这样就有了高像素密度屏幕。

 

移动端1物理像素边框的实现

问题产生的原因:

Retina屏会以2个(乃至3个)物理像素来显示一个CSS像素(1px)所以在CSS中指定的1px边框实际上占用2个以上的物理像素,使得用户体验较差。

解决方案:

(1)使用0.5px(CSS像素)

问题:并不是所有浏览器都能识别0.5px,只在Firefox和Safari 8+支持,安卓不支持。有的系统里0.5px会被当作0px来处理。

 

(2)用媒体查询根据设备像素比用“伪元素+transform”对边框进行缩放。

对于2倍屏 transform:scale(0.5)

对于三倍屏  transform:scale(0.33)

可以使用CSS的-webkit-min-device-pixel-ratio媒体查询针对不同的DPR作出处理。下面以Less代码为例:

@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
    .border-bt-1px{
        position: relative;
        :after{
            position: absolute;
       left:0;           
       bottom:
0; width: 100%; height: 1px; background: #ee2c2c; transform: scaleY(0.5); } } }

 

(3)使用box-shadow模拟边框

.box-shadow-1px{
    box-shadow: 0px 1px 1px -1px #ee2c2c;
}

优点:代码好,兼容性好。缺点:边框有阴影,颜色浅

 

 

 

rpx

rpx是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定的屏幕宽度是750rpx。

无论是在iPhone6上面还是其他机型上面都是750rpx的屏幕宽度。拿iPhone6来讲,屏幕宽度为375px,把它分为750rpx后,1rpx=0.5px=1物理像素

rpx换算成px等于屏幕宽度/750  

 

转载于:https://www.cnblogs.com/xiaoan0705/p/11268584.html

  • 9
    点赞
  • 39
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值