移动端web页面知识小结之像素、物理像素、逻辑像素

最新推荐文章于 2024-08-20 19:50:07 发布
最新推荐文章于 2024-08-20 19:50:07 发布
阅读量1.8w 收藏 11
点赞数 2
分类专栏： 移动Web 文章标签： web 移动 px
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aiolos1111/article/details/51880223
版权
本文详细介绍了移动端Web页面中像素、物理像素和逻辑像素的概念，探讨了DIP、DP、PT和SP的含义，以及在iOS和Android设备上的处理方式。通过理解设备像素缩放比(dpr)和不同设备的PPI，阐述了如何在不同设备上设计适应性的Web页面，强调了CSS中的1px并不总是等于设备的1px。
摘要由CSDN通过智能技术生成 
 一直以来，本人对移动端分辨率、像素等概念傻傻分不清，特查阅多位牛人博客后总结如下要点，以便日后查看。

文档来源

http://weizhifeng.net/you-should-know-about-dpi.html
http://www.chinaz.com/manage/2015/0902/441624.shtml
http://www.cnblogs.com/2050/p/3877280.html
http://www.uisdc.com/mobile-ui-measurement-guideline
http://www.25xt.com/appdesign/8336.html
http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/

CSS像素

    CSS像素是没有实际大小的抽象单位，它是一个相对长度，它相对的是电脑或手机显示器的分辨率。

但在不同的设备或不同的环境中，1px所代表的大小是不同的,如下表：

手机类型 华为荣耀7 IPhone6
主屏尺寸 5.2英寸 5英寸
分辨率 1920PX*1080PX 1920PX*1080PX
PPI 424PPI 469PPI

同样是一英寸，同样都是像素，为啥苹果手机一英寸有469个像素，华为只有424个像素

原因请见：http://blog.csdn.net/aiolos1111/article/details/51967744 ‘设备像素的相对性’
说明：像素这个东西，在苹果手机上变小了

结论：
1、由于在手机页面上，页面缩放比都是1，所以在手机端网页

最低0.47元/天 解锁文章
aiolos1111
关注
专栏目录
小程序物理像素和逻辑像素
xinrenwupen的博客
11-21 822
屏幕尺寸 屏幕尺寸指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米 比如常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等 如何计算手机尺寸？ 知道手机屏幕的长和宽，然后利用勾股定理，就可以算出斜边的长了。还有个更简单的方法，只要用尺子量一下它的对角线是多少厘米，然后再换算成英寸就搞定了。 屏幕尺寸 设备尺寸是指设备对角线的长度，单位为英寸（inch），...
浅谈移动端开发--物理像素和逻辑像素
筱葭的博客
04-14 1万+
1、物理像素 设备像素，在同一个设备上，它的物理像素是固定的，这是厂商在出厂时就设置好了的，即一个设备的分辨率是固定的。   2、逻辑像素 CSS像素，viewport中的一个小方格，CSS样式代码中使用的是逻辑像素。如果在一个设备中，物理像素与逻辑像素相等，将不会产生任何问题。但是，在iphone 4中，物理像素是640px*960px，而逻辑像素数为320*480px。因此，需要使用大
Android获取屏幕分辨率
最新发布
a307326984的博客
08-20 409
通过以上方法获取的分辨率与实际的分辨率不一样，获取的屏幕高度是减掉虚拟返回键后的分辨率，那如何获取完整的分辨率呢，方法如下。以上就是获取屏幕密度的全部内容，如有错误，欢迎指正。方法一. 通过DisplayMetrics类获取。方法三. 通过WindowManager获取。方法二. 通过Resources获取。
Android中获得屏幕的物理像素尺寸(x * y)
cdzwm的专栏
08-26 1660
<br />Android中获得设备屏幕的横向和纵向物理象素数, 请在Activity.onCreate(Bundle bundle)中使用如下代码：<br /> <br />DisplayMetrics dm = new DisplayMetrics();<br />getWindowManager().getDefaultDisplay().getMetrics(dm);<br />int x = (int)(0.5+dm.widthPixels*dm.density);<br />int y = (i
移动前端适配—逻辑像素和物理像素
weixin_34216196的博客
10-10 237
基础概念 dpi 每英寸所含有的像素点的个数。 物理像素 移动设备出厂时，就具备的分辨率，小米5 1920x1080 iphone6 1334x750 逻辑像素 Give your page a <meta name="viewport" content="width=device-width">, read out doc...
CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport
qq_33834489的博客
02-03 3647
最近看了很多这方面的文章，能搜到的基本看了个遍，但感觉还是似懂非懂，知道这个东西，很难说出这是个什么东西，先整理一些概念，慢慢消化，以后慢慢探索其中的原因。 1、PX(CSS pixels) 1.1 定义 虚拟像素，可以理解为“直觉”像素，CSS和JS使用的抽象单位，浏览器内的一切长度都是以CSS像素为单位的，CSS像素的单位是px。 1.2 注意 在CSS规范中
android逻辑分辨率,移动端web页面知识小结之手机分辨率与手机像素
weixin_39706441的博客
05-25 1080
一直以来，本人对移动端分辨率、像素的概念傻傻分不清，特总结下文，以便日后查看。一 屏幕分辨率是指屏幕上垂直方向和水平方向上的像素个数。常见取值 480X800,320X480等IPhone手机的屏幕分辨率如下图： 二 逻辑分辨率(像素)和物理分辨率(像素)IPhone手机逻辑像素与物理像素的对应关系如下图： 物理像素PX：CSS pixels 物理像素逻辑像素dp/pt/dip:device in...
微信小程序 （布局适配与物理逻辑像素）
weixin_45343878的博客
08-16 1906
移动端开发经常遇到一些概念：物理像素、逻辑像素、像素密度、像素比等 关键词： 屏幕尺寸、物理像素/屏幕分辨率/物理分辨率、逻辑像素DIP、像素密度PPI、像素比DPR、视网膜显示屏Retina、rpx、vw、vh等 屏幕尺寸 屏幕尺寸指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米 常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等 如何计算手机尺寸？ 知道手机...
微信小程序（布局适配与物理逻辑像素）
weixin_45492145的博客
11-21 403
前言 移动端开发经常遇到一些概念：物理像素、逻辑像素、像素密度、像素比等，本节来详细介绍下 关键词： 屏幕尺寸、物理像素/屏幕分辨率/物理分辨率、逻辑像素DIP、像素密度PPI、像素比DPR、视网膜显示屏Retina、rpx、vw、vh等。 屏幕尺寸 华为荣耀7 屏幕尺寸指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米 比如常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5...
移动端开发 - 物理像素、逻辑像素、dpr等概念梳理
LRQQHM的博客
01-05 1977
屏幕尺寸 屏幕尺寸一般用英寸（inch）来描述，指的是屏幕对角线的长度，例如平时常常说的 13寸、15寸、27寸指的就是这个，手机的 6.1寸、6.5寸也是如此 其计算方式如下： 通过屏幕宽高可以计算出对角线长度（单位：mm），又由于 1英寸=25.4mm ，因此可以通过这种方式计算出屏幕的尺寸。 分辨率 分辨率一般可以细分为屏幕分辨率、图像分辨率、打印分辨率等。 屏幕分辨率 对于屏幕分辨率而言，指的是显示器显示的像素点数，例如经常看到的 1024768、1366768、2560 x 1600 等，在屏
微信小程序-----布局适配与物理逻辑像素
weixin_44775723的博客
08-16 699
一、屏幕尺寸 屏幕尺寸指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米。 常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等。 如何计算手机尺寸？ 第一种：量出手机屏幕的长和宽，在利用勾股定理，就可以算出斜边的长。 第二种：用尺子量一下它的对角线是多少厘米，然后再换算成英寸就搞定了。 手机屏幕尺寸： 二、物理像素–UI设计师像素（物理像素/屏幕分辨率/物理分...
viewport手机逻辑像素与物理像素原理（附完整手机各版本尺寸）
谢泽的网络日志
12-27 2万+
每英寸有多少个像素，称为ppi(pixel per inch)。我们可以简单算算，iPhone 4是640 x 960像素，对角线就是1154像素，除以3.5英寸，应该是330ppi。而官方给出的数字是326ppi。当像素太密，超过300ppi的时候，人眼 也就不能区分出每个像素。因此iPhone 4的屏幕叫作Retina显示屏。Retina在英文中，是视网膜的意思。
物理像素，设备独立像素，像素比
renqiaoli的博客
03-15 3084
物理像素：又称设备像素，设备屏幕上实际有的像素点，如pc端常见分辨率1920 * 1080，意味着在屏幕水平方向上有1920个像素点，垂直方向上有1080个像素点。 屏幕尺寸：屏幕对角线的长度，如17英寸 屏幕像素密度（Pixels Per Inch）：简称ppi, 每英寸上的像素点。ppi越高，屏幕越清晰 若屏幕分辨率 = x * y，ppi = Math.sqrt(x * x + y * y)/屏幕尺寸 设备独立像素（Device Independent Pixels）：又称设备无关像素，简
移动端web页面知识小结之像素密度、分辨率、屏幕尺寸
aiolos1111的专栏
06-29 7846
一直以来，本人对移动端分辨率、像素等概念傻傻分不清，特查阅多位牛人博客后总结如下要点，以便日后查看。 文档来源http://weizhifeng.net/you-should-know-about-dpi.html http://www.chinaz.com/manage/2015/0902/441624.shtml http://www.cnblogs.com/2050/p/38772
html物理像素,用一篇文章了解ppi,dpr,物理像素，逻辑像素，以及二倍图
weixin_42128963的博客
06-03 358
这篇文章能让你了解到什么是分辨率、dpr、dip、ppi (dpi相当于ppi，dpi用点表示物理像素)首先从最简单的ppi开始:一部手机，有大有小，怎么知道手机的大小用尺子量一量即可，有两条边量哪一条呢？勾股定理告诉我们斜边越大，面积就越大，量斜边没跑了。量的单位可不是cm,而是英寸。1英寸= 2.54cm，这个相信看过《新华字典》或《现代汉语词典》的人都知道，上面附有计量单位表。嘿嘿，又引出了...
CSS像素 物理像素 分辨率 PPI
章柏华的博客
12-08 2312
虽然自己平时也在写响应式的网站，但是对于像素，分辨率，物理像素几个概念还是有点理不清楚，下面是我看了一些文章和自己的总结记录下来的文章，以免后面自己又忘记。 这里着重参考了 第一篇文章：http://www.jianshu.com/p/c3387bcc4f6e       第二篇文章 ：https://segmentfault.com/a/1190000004383049 什么是英寸？屏幕尺
CSS像素（px）、物理像素（pt）、rem、em、rpx
热门推荐
yangyang的专栏
07-24 3万+
1.
关于“设备无关位图”！
frances_han的专栏
11-03 3938
BMP图像文件是Windows   3.X   所采用的图像文件格式，几乎所有Windows   上的应用软件都支持这种图像文件，其中最常见的就是Windows本身所附的绘图软件(Paint－Brush)，所以欲在Windows上探讨图像的文件格式,势必要对BMP有一个完整而全面的认识。  BMP图像分为两类，DDB和DIB，DDB(device-dependent   bitmap)即为设
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值