移动开发之物理像素、物理像素比和二倍图

物理像素&物理像素比

物理像素点（分辨率）是指屏幕显示的最小颗粒，是物理真实存在的。
在PC端页面，1px等于1个物理像素；但在移动端，1px不一定等于1个物理像素。
物理像素比（屏幕像素比）是指1px能显示的物理像素点的个数。

比如：iPhone8手机的物理像素比就是2，它表示1px开发像素 = 2个物理像素。

多倍图

原因：一张100px * 100px的图片，如果在手机上打开，该图片会按照相应的物理像素比放大倍数，进而会使图片失真。
为了解决这个图片失真的问题，通常我们会使用倍图来提高图片的质量。
通常使用的多倍图是二倍图，当然还存在3倍图、4倍图等。
对于二倍图的使用方法，我们可以先找一张放大二倍后的图片，然后再用样式进行缩小为原来的一半大小，这时再用该图片，就不会出现图片失真的情况。（适用于插入图片，也适用于背景图片）

微信公众号也会定期更新，觉得文章写得还可以的，可以加个关注！点个赞！谢谢！

移动开发之物理像素、物理像素比和二倍图相关推荐

html逻辑像素和实际像素,物理像素、逻辑像素、设备像素比、PPI、二倍图、css3盒子模型、布局视口、视觉视口、理想视口...
1.1物理像素手机屏幕横向有828个点手机屏幕纵向上有1792个点同等大小屏幕下,点越多.图像显示越精细上面所说屏幕上一个个点就是物理像素(physical pixel) 物理像素也叫设备像素 ...
二倍图（物理像素物理像素比，多倍图，背景缩放），移动端开发选择（移动端主流方案【单独制作移动端页面（主流），响应式页面兼容移动端（其次）】，移动端技术解决方案【移动端浏览器，特殊样式】）
二倍图物理像素&物理像素比物理像素指的是屏幕显示的最小颗粒,是物理真实存在的,我们开发的1px不一定等于1个物理像素,(PC端相同,移动端不一定相同) PC端和早期手机屏幕是 1CSS像素 ...
CSS媒体查询-物理像素-逻辑像素
媒体查询基本使用媒体查询是一种提供给开发者针对不同设备需求进行定制化开发的一个接口. 你可以根据设备的类型(比如屏幕设备.打印机设备)或者特定的特性(比如屏幕的宽度)来修改你的页面. 媒体查询的使 ...
作为前端的你不能不知道的知识，总结物理像素，像素密度，分辨率，CSS像素，设备像素比，二倍图，layout viewport、visual viewport 、ideal viewport、meta。
此篇文章总结物理像素,像素密度,分辨率,CSS像素,设备像素比,二倍图,layout viewport.visual viewport .ideal viewport.meta. 首先我们来谈谈最基础 ...
meta视口标签、物理像素与物理像素比、二倍图做法、背景缩放background-size、背景图片2倍图
01-meta视口标签 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
CSS像素物理像素分辨率 PPI
虽然自己平时也在写响应式的网站,但是对于像素,分辨率,物理像素几个概念还是有点理不清楚,下面是我看了一些文章和自己的总结记录下来的文章,以免后面自己又忘记. 这里着重参考了第一篇文章:http:// ...
html物理像素,用一篇文章了解ppi,dpr,物理像素，逻辑像素，以及二倍图
这篇文章能让你了解到什么是分辨率.dpr.dip.ppi (dpi相当于ppi,dpi用点表示物理像素) 首先从最简单的ppi开始: 一部手机,有大有小,怎么知道手机的大小用尺子量一量即可,有两条边量 ...
移动端布局介绍——css像素/物理像素/设备像素比
我们在网页后台看到的不同手机的分辨率是:css像素,设备的独立像素:见下图的红色框里的东西: 如果我们把这个页面截图下来在属性里看它的分辨率, 如下图所示: 发现这个分辨率其实是css分辨率的二倍, ...
物理尺寸转换为像素
m_iWidth = sWidth*96/25.4;//物理宽度转换为像素物理尺寸单位mm毫米 m_iHeight = dHeight*96/25.4; 用painter绘图的时候,使用的单位是像素 ...

移动开发之物理像素、物理像素比和二倍图

物理像素&物理像素比

多倍图

移动开发之物理像素、物理像素比和二倍图相关推荐

最新文章

热门文章