物理像素和物理像素比

物理像素比在移动端开发的时候至关重要,那什么是物理像素和物理像素比?

什么是物理像素？

物理像素,通俗一点来说就是手机售卖的时候上架所说的屏幕分辨率,比如这里的iPhone X 屏幕的分辨率就是1125 * 2436

image.png

什么是物理像素比？

物理像素比指的是一个px能显示的物理像素点的个数,称为物理像素比或者屏幕像素比,拿iPhone X来说,拿一个375*812的盒子就可以将整个iPhone屏幕填满,所以物理像素比就是1125/375=3.0

image.png

图片在物理和物理像素比之下的影响

假设一张图的大小是50px*50px,在iPhone X 下 物理像素比是1:3,也就是原来的50px被放大了3倍,现在变成了150px。在纯色的背景下没有什么影响，但是图片就会变得很模糊。

有效解决图像放大模糊的方法

1.插入图片

多倍图，可以有效地解决图像放大模糊的情况，具体的做法如下：

1. 原本的图片是50px50px，观察到iPhone x物理像素比是3倍，这里准备一张 150px150px的图片
   2.将图片手动调成50px*50px，这样在放的的时候就不会变得模糊

效果图：

二倍图对比

背景图的解决方法

2.背景图缩放的做法

以上只是插入图片的做法，下面还有背景图的做法

1. background-size

/* 这样是设置宽度和高度，可能会造成图片变形 */
            background-size: 100px, 100px;
            /* 是根据父盒子来说的，显示为父盒子的一半 */
            background-size: 50%;
            /* 设置宽度为100px，高度会跟着等比例缩放 */
            background-size: 100px;
            /* 等比例拉伸，完全覆盖父盒子，可能会导致图像显示不全的问题 */
            background-size: cover;
            /* 等比例拉伸，往外延伸，宽度和高度一边到了就不会在扩展了，可能会有一部分空白 */
            background-size: contain;

背景图缩放案例：