• 前端二倍图

    物理像素&物理像素比：

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

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

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

    多倍图：

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

    1. html>
    2.  
    3. <html lang="en">
    4.  
    5.  
    6.  
    7. <head>
    8.  
    9.     <meta charset="UTF-8">
    10.  
    11.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    12.  
    13.     <meta name="viewport"
    14.  
    15.         content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    16.  
    17.     <title>Documenttitle>
    18.  
    19.     <style>
    20.  
    21.         /* 我们需要一个50*50像素（css像素）的图片，直接放到我们的iphone8里面会放大2倍 100*100px 就会模糊 */
    22.  
    23.         /* 我们采取的是 放一个100*100像素图片 然后手动的把这个图片缩小为50*50（css像素） */
    24.  
    25.         /* 我们准备的图片 比我们实际需要的大小 大2倍，这就种方式就是2倍图 */
    26.  
    27.         img:nth-child(2) {
    28.  
    29.             height: 335px;
    30.  
    31.         }
    32.  
    33.     style>
    34.  
    35. head>
    36.  
    37.  
    38.  
    39. <body>
    40.  
    41.     
    42.  
    43.     <img src="images/gwmx.jpg" alt="">
    44.  
    45.     
    46.  
    47.     <img src="images/gwm.jpg" alt="">
    48.  
    49. body>
    50.  
    51.  
    52.  
    53. html>

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

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

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

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

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

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

    对于切出二倍图的问题：

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

  • 相关阅读:
    目标检测YOLO实战应用案例100讲-基于单阶段网络的小目标检测（下）
    Vite + React 如何从0到1搭建一个开源组件库
    mybatisplus动态sql整型数组使用in踩坑
    项目开发混淆从初识到理解
    微信小程序入门-＞小程序简介，小程序商城项目案例，小程序入门案例及目录结构
    SummarizedExperiment 对象访问、操作和转换
    Java_题目_学生管理系统_注册登录忘记密码
    C++ Core Guidelines 中文版 GSL
    Yii2 一个隐藏的小坑，致使我的组件的 bootstrap 方法执行了多次
    09【享元设计模式】
  • 原文地址：https://blog.csdn.net/m0_51495354/article/details/128127569