关于2倍图的理解

最新推荐文章于 2023-04-23 13:55:27 发布
最新推荐文章于 2023-04-23 13:55:27 发布
阅读量957 收藏 3
点赞数 1
文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxllxl211/article/details/128757316
版权

在电脑端1个css像素=1个物理像素
所以一个长宽都是100px的照片，需要100✖100px的物理像素

而在移动端存在多倍图的关系，假如是2倍图的关系
即：1个css像素需要2个物理发光点
假如现在有一个长宽都是100px像素的照片
放在手机上也是长宽也是100✖100px

苹果8的实际像素宽度是750px，然后通过视网膜屏技术给压缩成375px
所以一个长宽都是100px像素的照片
直接放在手机上显示的也是100×100px的空间大小。
但是准备一个200×200px的照片，然后缩放2倍，再在手机上显示，同样的视觉大小
都是100×100px的空间大小。但是会更清晰
在这里插入图片描述

lxl211
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
简单直流二倍压电路介绍
08-24
倍压电路原理详解 说明：要理解倍压电路，首先要将充电后的电容看作一个电源。可以和供电电源串联，就像普通的电池串联的原理一样。 直流半波整流电压电路1）负半周时，即A为负、B为正时，D1导通、D2截止电源经D1向电容器C1充电，在理想情况下，此半周内D1可看成短路，同时电容器C1充电到Vm，其电流路及电容器C1的极性如上图（a）所示。（2）正半周时，即A为正、B为负时，D1截止、D2通，此时供电电源和C1串联后电压为2Vm，于是向C2电，使C2充电至最高值2Vm，其电流路径及电容器C的极性如上图（b）所示。 需要注意的是： （1）其实C2的电压并无法在一个半周内即充至2Vm，它必须在几周后才可渐渐趋近于2Vm，为了方便说明，底下电路说明亦做如此假设。 （2））如果半波倍压器被用于没有变压器的电源供应器时，我们必须将C1串联一电流限制电阻，以保护二极管不受电源刚开始充电涌流的损害。 （3）如果有一个负载并联在倍压器的输出的话，如一般所预期地，在（输入处）负的半周内电容器C2上的电压会降低，然后在正的半周内再被充电到2Vm如下图所示。 所以电容器c2上的电压波形是由电容
二倍图（物理像素&物理像素比，多倍图，背景缩放），移动端开发选择（移动端主流方案【单独制作移动端页面（主流），响应式页面兼容移动端（其次）】，移动端技术解决方案【移动端浏览器，特殊样式】）
shy的博客
05-06 920
二倍图（物理像素&物理像素比，多倍图，背景缩放），移动端开发选择（移动端主流方案【单独制作移动端页面（主流），响应式页面兼容移动端（其次）】，移动端技术解决方案【移动端浏览器，特殊样式】）
【56】移动WEB开发(3)——二倍图
倏存的博客
04-16 957
⚪物理像素点⚪物理像素比/屏幕像素比⚪Retina(视网膜屏幕)⚪多倍图⚪常见多倍图切图格式
css 图片放大1.2倍,什么是二倍图？怎样使用二倍图？
weixin_32957761的博客
08-03 1781
当设备像素比很大时，图片会被放大，而放大会让图片看起来模糊。为此，我们可以使用二倍图的方式来提高图片的清晰度。接下来就来讲解二倍图的概念和使用方法。在实际开发中，当一个50 ×50像素(CSS像素)的图片直接放到iPhone 6/7/8设备中显示时，图片会被放大，变成原来的两倍(iPhone 6/7/8的设备像素比为2)，即100 ×100。为了避免图片放大后模糊，我们可以预先制作一张100 ×1...
【移动端网页布局】移动端网页布局基础概念 ⑤ ( 视网膜屏技术 | 二倍图概念 | 代码示例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-23 755
一、视网膜屏技术 二、二倍图概念 三、代码示例
视口、二倍图
ssigin的博客
04-04 275
于是二倍图就诞生了，用来解决这个问题，我们首先拿到一个100 * 100px得图片，把这张图片压缩成50 * 50px，然后把这张图片放到移动端中，在移动端中会把这张50 * 50px的图片放在一个100 * 100物理像素的区域（这个区域对应的css像素是50px * 50px)，会把这个图片放大两倍，刚好就是这张压缩图片的原图，就会显示的非常清晰。在全屏模式下，视口是设备屏幕的范围，窗口是浏览器窗口，浏览器窗口大小小于或等于视口的大小，并且文档是这个网站，文档的大小可比视口长或宽。注意：是网站的区域。
移动端开发之二倍图
HXL521666的博客
11-08 3009
物理像素&物理像素比 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。出厂就设置好了。(分辨率) 我们开发时候的1px不一定就等于1个物理像素 PC端页面，1个px等于1个物理像素，但是移动端就不尽相同 1个px的能显示的像素个数，称为物理像素比或屏幕像素比 物理像素比 = 物理像素（分辨率） / 独立像素（CSS像素） 例如：iPhone X 的物理像素比为 3 屏幕尺寸 独立像素（CSS像素） 物理像素（分辨率） ppi/dpi（像素密度） dpr（倍图
二倍图三倍图什么意思_iOS 2倍图 3倍图适配小结
weixin_35415045的博客
01-30 2855
写在前面越来越觉得知识点是这样的 ，知道了是一回事，总结起来，又是另外一回事。有时候，明明知道了，感觉已经掌握了这个知识点，但是总结起来却很难，甚至都不知道从何下手，也许还是知识点没掌握牢固的缘故。(以下都是小虾小结，大咖请绕行哦????)正题整个项目主要功能基本完成，测试也接近尾声，UI还在不断的细调中。关于UI发现的几个问题，特此记录下来。操作类button宽度以及默认和点击状态小图标失真背景大图片...
css 2倍图 3倍图使用方法
csdnUser0001的博客
03-03 2760
css二倍图的使用 使用 CSS 的 DevicePixelRatio 媒查询属性 参考 CSS 或 srcset 让浏览器自动切换 1X/2X/3X图像 移动端项目中 @2x 图 和 @3x 图 的使用（需要支持css3） /默认大小/ .photo {background-image: url(image100.png);} /* 如果设备像素大于等于2，则用2倍图 / @media scre...
移动WEB开发之流式布局--二倍图
薛定谔的猫
11-16 1180
就是原先用50*50放到移动端会放大，变的模糊，但是如果我们采用100*100然后压缩成50*50，在放到移动端又变成了100*100实际上并没有变化，但是实际没有模糊。Retina（视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。物理像素比就是屏幕的分辨率，分辨率越高，显示越清楚，750* 1334就是横的有750的像素点，竖的有1334的像素点。一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比。背景图片 注意缩放问题。
基于Matlab实现倍频程图形转换（源码+说明文档）.rar
05-06
1、资源内容：基于Matlab实现倍频程图形转换（源码+说明文档）.rar 2、适用人群：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业或毕业设计，作为“参考资料”使用。 3、更多仿真源码和数据集下载...
jQuery鼠标悬停翻转显示隐藏说明图片
06-11
效果描述：  鼠标悬停在图片上后，显示隐藏的另外一张图片，鼠标移走后返回之前图片，整个过程带有翻转效果 原理： ... 2、将其中一个翻转单元复制到你的网页中即可，依照此原理可以复制扩张N倍
理解大数据-实践大数据.pptx
12-24
支持海量用户的高并发访问（千万级用户、万级并发） 充分释放硬件的潜力（多核、大内存等） 大规模部署的自动化和运行状态监控 创新的多检索引擎机制，提供开放的二次开发接口 理解大数据-实践大数据全文共48页，...
FFMPEG图片放大缩小平移示例
06-20
其中z='1.2'表示图片放大1.2倍，z可以省略也就zoompan='1.2'，可以理解为XYZ坐标轴的Z zoompan=z='min(zoom+0.001,1.2)表示图片放大，表示每帧0.001倍率放大， min表示放计算后，最小值不大于1.2。 参数 x='iw/4-...
2倍图-多倍图
qq_40231344的博客
07-12 655
物理像素是屏幕显示的最小单位，是物理真实存在的，在出厂的时候就已经设置好了。 PC端1px=一个物理像素点，但是在移动端就不尽相同。 物理像素比/屏幕像素比=1个px能显示的物理像素的个数 在PC端，1px=1个物理像素，但是在移动端就不尽相同。 1个px能够显示的物理像素点的个数称为物理像素比。 有的1px需要2个物理像素填充，这样图片看起来更加清晰。就是说在PC端的图片放在移动端时被放大了1倍。这时候就要做2倍图，先准备一个100*100的，在手动缩小成50*50，然后在移动端显示的时候会变成
前端一倍图、二倍图、多倍图
热门推荐
wgod
07-25 2万+
获得设备像素比后，便可得知设备像素与CSS像素之间的比例。也就是window.devicePixelRatio。 一倍图：当这个比率为1:1时，使用1个设备像素显示1个CSS像素。 二倍图：当这个比率为2:1时，使用4个设备像素显示1个CSS像素， 三倍图：当这个比率为3:1时，使用9（3*3）个设备像素显示1个CSS像素。 这里是引用 设备像素:也叫物理像素，显示设备上最微小的物理部件。 比...
关于二倍图的一些知识点
m14260的博客
08-19 478
。
iPhone手机屏幕尺寸与倍图计算公式（更新至iPhone 14 Plus）
jia12216的专栏
09-28 1万+
iphont4s 是2倍图 但是你画一个粗为0.5的线，iphont4s显示不出来，iphont5s却可以看到一个像素（从截图上看到的）的线来。 识别手机机型使用的是几倍图，一般通过这个值来识别：[UIScreen mainScreen].scale。若为1就1倍图（iphone 4/iphone 4s是个例外），若为2就是2倍图，若是3就是3倍图。但是现在iphone 4/iphone 4s都是...
为什么常用二倍图，流式布局中一倍图是否靠得住
夸克IT
10-14 1623
常用布局第一篇——流式布局 回顾 上一篇中我们结束了 css3 中的内容，回顾css3 我们深入的学习了css中的东西，在css的基础上c3又有了非常好的创新，这些都在日常的工作中特别的常用，所以需要好好温故而知新。h5c3的基础学完之后，就开始布局了，今天是布局的第一篇。先来看看流式布局。 视口 视口（viewport） 就是浏览器显示页面内容的屏幕区域，视口可以分为布局视口、视觉视口和理想视口 布局视口 一般移动设备的浏览器默认设置了一个布局视口，用于解决早期pc端页面在手机上显示的问题 IOS、
gray编码光栅的最小栅距应为移相光栅图像相移量的四倍
最新发布
09-21
而gray编码光栅是一种特殊的光栅形式，其栅距在编码之后会形成一个二进制码字序列，使得相邻的两个码字之间只有一个比特位发生变化。这种编码方式可以有效地减少系统误差和读取错误。 在gray编码光栅中，最小栅距是...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值