前端二倍图

news2024/11/26 9:48:39

物理像素&物理像素比：

物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的，这是厂商在出厂时设置好了
我们开发时候1px不是一定等于1个物理像素的
Pc端页面，1px等于1个物理像素点，但是移动端就不尽相同
一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比

Pc端和早期的手机屏幕/普通手机屏幕：1css像素=1物理像素

Retina（视网膜屏幕）是一种显示技术，可以把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度

多倍图：

对于一张50px*50px的图片，在手机retina屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊
在标准的viewpoint设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题
通常使用二倍图，因为iphone6\7\8的影响，但是现在还存在3倍图4倍图的情况，这个看实际开发公司需求
背景图片，注意缩放问题

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport"

        content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

    <title>Document</title>

    <style>

        /* 我们需要一个50*50像素（css像素）的图片，直接放到我们的iphone8里面会放大2倍 100*100px 就会模糊 */

        /* 我们采取的是 放一个100*100像素图片 然后手动的把这个图片缩小为50*50（css像素） */

        /* 我们准备的图片 比我们实际需要的大小 大2倍，这就种方式就是2倍图 */

        img:nth-child(2) {

            height: 335px;

        }

    </style>

</head>



<body>

    <!-- 模糊的 -->

    <img src="images/gwmx.jpg" alt="">

    <!-- 采用二倍图 -->

    <img src="images/gwm.jpg" alt="">

</body>



</html>

背景缩放background-size：（实现背景图的二倍图效果）

Background-size属性规定背景图像的尺寸

Background-size：背景图片宽度背景图片高度；

单位：长度|百分比|cover|contain

Cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

Contain：把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

对于切出二倍图的问题：

Cutterman切图时可以切出一倍图二倍图三倍图