移动端布局(一)dp、dip、PPI、dpr、图片模糊

晴空万里彩虹再现

墨衍会员 · AI 创作全网分发码龄10年

关注

转载 2022-03-02 22:02:07 2.4k 阅读 AI 写同款· GEO 优化 ›

移动端适配dpr 这是将layout viewport（布局视口）宽度设置为设备屏幕宽度，这句就得到了理想视口。阅读详情

注: 此篇文章引用多篇文章，在文章的结尾处有注明文章的来源

高清屏

即高清屏,把更多的像素压缩至一块屏幕里，从而达到更高分辨率显示的细腻程度，使人眼无法分辨出单个的像素。

物理像素(dp)

物理像素，设备的硬件像素，生产出来就已经设定好了的真实像素，不能被改变。是计算机屏幕渲染画面(图像)的最小单位，整个图像是由像素单位组成的，这个单位的形状通常都是会发光的正方形方格，

在相同尺寸屏幕中，像素点越多，像素点就越小就越清晰(因为你在该屏幕内容纳更多的像素，像素点自然会缩小)，像素点越少，像素点就越大，图像就不清晰，因为你都能看到像素点的锯齿状。

分辨率指的就是水平垂直方向上像素点的数量，比如1920*1080表示屏幕水平方向上有1920个像素点，垂直方向上有1080个像素点。

css像素

网页中，用于控制元素样式的像素，它也属于独立像素，浏览器在显示页面时，需要将css像素转为物理像素在呈现。

设备独立像素(dip)

也叫虚拟像素、逻辑像素，是我们程序软件里使用的像素，它是相对于物理像素来计算的，表示一个物理像素由多少个逻辑像素来表示，也就是说可以人为的定义让1个独立像素等于多少个物理像素。

注：在我们的浏览器中css像素就是独立像素

为什么要有设备独立像素呢?

在早期普通屏中，只有物理像素，没有独立像素，在不缩放的情况下，1个css像素就是1个物理像素，比如iphone3手机屏幕是320 * 480px的分辨率，那么width等于320px的元素是占满整个屏幕的。从iphone4开始苹果公司推出了高清屏，分辨率变成640 * 960px，也就是普通屏一个像素点有高清屏两个像素点那么大，因为相同尺寸的屏幕要放满640 * 960px的像素，只能是将像素点面积缩小1倍，如果还按照1物理像素就是1个css像素来渲染图像，那么width等于320px的元素只会占据屏幕宽度的一半，如何让iphone4和iphone3显示相同呢? 在开发中为了让不同设备上有一样的显示效果，就引入了独立像素，让网页中css像素成为独立像素，在iphone3中不变1个css像素就是1个物理像素，但是在iphone4上，在不缩放的前提下，1个css像素等于2个物理像素，这样iphone4中width等于320px的元素等于640个物理像素，正好占满iphone4的宽度， font-size: 20px; 的字体在 iphone3 和 iphone4 上的尺寸也相同，只不过在 iphone4 上的字体更清楚。

还有一个因素会引起css中px的变化，那就是用户缩放。例如当用户把页面放大一倍，css像素不会变，但是css中1px所代表的物理像素也会增加一倍，反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。

该段文字引用于https://blog.youkuaiyun.com/weixin_30301449/article/details/96200494

设备像素比(DevicePixelRatio):

DPR = (设备像素dp / 独立像素dip)*scale(表示缩放大小为百分之几)，物理像素和独立像素的比例，表示由一个物理像素由多少个css像素来表示。

在iphone4上dpr是2，但不是所有设备都是2，不同设备的dpr都是不同的。
下列展示了不通过设备物理像素和逻辑像素的关系。
在这里插入图片描述

像素密度(PPI):

表示每英寸面积内像素的数量(疏密程度),PPI是一个定值，是一个固定参数，PPI的值越高，表示在一定尺寸的屏幕上像素数量越多。
在这里插入图片描述

在这里插入图片描述

PPI的计算公式: 屏幕边的物理像素除以物理尺寸

图片模糊

同一张图片，在普通屏显示正常，但在高清屏出现模糊。原因是一个物理像素的点分成了四个像素的点进行显示。

1个位图像素是栅格图像(如：png, jpg, gif等)最小的数据单元。每一个位图像素都包含着一些自身的显示信息(如：显示位置，颜色值，透明度等)。理论上，1个位图像素对应于1个物理像素，图片才能得到完美清晰的展示。
1个位图像素对应于4个物理像素，由于单个位图像素不可以再进一步分割，所以只能就近取色，导致图片看起来比较模糊。
当1个位图像素占据少于1个物理像素(压缩图像)，图片就会锐化。

假设我有一张图片，图片素材尺寸为200 * 200的位图像素，我们设置css:width为200px,height为200px；在ipnone3上图片渲染为200px * 200px的位图像素是清晰的，但是在高清屏iphone4上图片渲染为400px * 400px，由于位图像素不能分裂，哪多出来的200像素怎么生成，于是只能使用线性插值算法，颜色近似选取(选择相似的颜色填充像素块)，于是图片就模糊了。
在这里插入图片描述

在这里插入图片描述

位图: 由多个像素点组成的点阵图像。

缩小图像(压缩图片):
称为下采样（subsampled）或降采样（downsampled）的主要目的是两个：
使得图像符合显示区域的大小；
生成对应图像的缩略图；
下采样的原理：
对于一幅图像尺寸为MN，对其进行s倍的下采样，即得到（M/s）（N/s）尺寸的分辨率图像，当然，s应该是M和N的公约数才可以，如果考虑是矩阵形式的图像，就是把原始图像s*s窗口内的图像变成一个像素，这个像素点就是窗口内所有像素的均值 Pk = (∑ Xi)/ S^2

放大图像:
称为上采样（upsampling）或图像插值（interpolating）的主要目的是放大原图像，从而可以显示在更高分辨率的显示设备上。
上采样的原理：
图像放大几乎都是采用内插值方法，即在原有图像像素的基础上在像素点之间采用合适的插值算法插入新的元素。插值算法还包括了传统插值，基于边缘图像的插值，还有基于区域的图像插值。

解决图片模糊的方法:

方法一:
因此，要想让视网膜屏幕下的图片高清晰显示，我们需要的图片的原始大小不能是200×200像素，而需要2倍高宽，即400×400像素，CSS像素限制依然是：

img {
    width: 200px;
    height: 200px;
}

也就是说在普通屏下也适用二倍图
在普通屏幕下，200×300(CSS pixel)img标签，所对应的物理像素个数就是200×300个，而两倍图片的位图像素个数是200×300×4个，所以就出现一个物理像素点对应4个位图像素点，但它的取色也只能通过一定的算法取某一个位图像素点上的色值，这个过程叫做(downsampling)，肉眼看上去虽然图片不会模糊，但是会觉得图片缺少一些锐利度，或者是有点色差，
在这里插入图片描述

所以最好的解决办法是：不同的dpr下，加载不同的尺寸的图片。不管是通过CSS媒体查询，还是通过JS条件判断都是可以的。

方法二:
准备两份素材，普通和高清素材。并且通过素材文件名后缀来区分，比如普通素材名称为apple.png,那么高清素材名称就为apple@2x.png，自然高清素材是普通素材面积的四倍，系统会优先使用高清素材，但自动缩小到普通素材的大小，这样也就不存在图片拉伸的问题了。当我们需要渲染一张32x32的图片，我们实际上需要准备64x64的素材。

方法三：
查询像素密度：准备两种大小但是一样的图片。利用css的媒体查询或者JS的 Retina.js来调取图片。（浏览器支持是一个问题）

可以通过“device-pixel-ratio”属性或者其扩展属性“min-device-pixel-ratio”和“max-device-pixel-ratio”。这几个Media Queries(媒体查询)可以使用background-image为Retina准备高精密度像素的图片。

.icon {
  background-image: url(example.png);
  background-size: 200px 300px;
  height: 300px;
  width: 200px;
}

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
  .icon {
    background-image: url(example@2x.png);
  }
}

文章转载自:
https://www.cnblogs.com/fangpengchengbupter/p/7677707.html%20%28%E4%B8%8A%E9%87%87%E6%A0%B7%E5%92%8C%E4%B8%8B%E9%87%87%E6%A0%B7%29 (上采样和下采样)

https://www.zhangxinxu.com/wordpress/2012/10/new-pad-retina-devicepixelratio-css-page/) (张鑫旭博客)

https://www.infoq.cn/article/development-of-the-mobile-web-deep-concept(李光毅博客)

https://www.cnblogs.com/superlizhao/p/8729190.html

https://www.bbsmax.com/A/gVdnO0G1zW/

收录于