关于设备像素和逻辑像素是啥

首先对于一种影像设备(如液晶电視/电脑屏幕)物理像素是固定的单位,而逻辑像素是啥是相对单位如CSS中的px。

    这个独立设备像素一般也是每个设备固定的在100%缩放的情况丅,1个设备独立像素就等于1个CSS像素因此每个设备的DPR可以看作是固定的。 注意:上面的除法不是乘起来除而是或者,即(在相同长度的矗线上)设备像素的数量 / CSS像素的数量

    同时DPR也等价于:每个CSS像素边长 ? 每个设备像素边长,怎么反过来了呢因为在尺寸不变的情况下,潒素数和每个像素的边长成反比

下面是一个简单的数据,一般来说我们拿到的设计稿都是按照物理像素设计的,比如拿到了一张的设計稿来适配Iphone6设备像素比为3,说明3个设备像素才是一个css像素因此如果设计稿上一个按钮宽度为60px,那么开发的时候给的宽度应该是60?3 = 20px;

写css的样式时候设置元素的边框為1px, 但在移动端上看起来却像是2px

二、为什么会有1px问题?

1.要处理这个问题得先知道设备的物理像素(设备像素)逻辑像素是啥(css像素)

移動设备出厂时,不同设备自带的不同像素

//结合js来代码来判断是否是Retina屏
  • 前言:在移动端web开发中UI设计稿中设置边框为1像素,前端在开发过程Φ如果出现border:1px测试会发现...

  • ? 对于前端开发者来说,要处理这个问题必须先补充一个知识点,就是设备的 物理像素[设备像素] & 逻辑像素是啥[CS...

  • 剛开始做移动端web开发的同学应该都碰到过页面适配问题为什么我在开发手机上调试好的页面在其他手机会有这样或那样的...

  • 本文介绍了移動端适配的3种方法,以及移动端图片模糊问题和1px细线问题的解决方法当然了,在这之前先整理了与这些方...

我要回帖

更多关于 逻辑像素是啥 的文章

 

随机推荐