物理像素和物理像素比

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

什么是物理像素？

物理像素,通俗一点来说就是手机售卖的时候上架所说的屏幕分辨率,比如这里的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.插入图片

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

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>多倍图</title>
    <style>
        img:last-child {
            width: 50px;
            height: 50px;
        }
    </style>
</head>

<body>
    <img src="images/apple50(1).jpg" alt="">
    <img src="images/apple100.jpg" alt="">
</body>

</html>

效果图：

二倍图对比

背景图的解决方法

2.背景图缩放的做法

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

background-size

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

背景图缩放案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图2倍缩放案例</title>
    <!-- 1.首先准备一个2倍图
    2.将这个二倍图缩放成1倍大小,这样就不会模糊了  background-size-->
    <style>
        div {
            width: 50px;
            height: 50px;
            border: 1px solid red;
            background: url(images/apple100.jpg) no-repeat;
            background-size: 50px 50px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>