关于px,分辨率,ppi的辨析
概述
在本篇文章的开始,我先为大家解释一下这三个名词的概念。
px全称为pixel——像素。pc及移动设备的屏幕就是通过往像素矩阵中填充颜色,从而在宏观上体现出图像。像素越小,图像越清晰。
分辨率又称解析度.解像度,其意义为该屏幕中能够显示的像素个数,往往用水平和垂直像素个数来衡量。
ppi全称为pixels per inch,意义是每英寸所拥有的像素个数。由px的定义可以得出,ppi越大,图像越清晰。
px所需要思考的问题
相同的px个数,如10px,在不同类型的显示屏幕上的物理长度相同吗?相同的px个数,在不同类型的显示屏幕中占的比例相同吗?
先回答上面的问题——大部分情况下不相同。
为什么呢?在这里要明确一点——px不是物理长度单位。其实由我概述中说的:
像素越小,图像越清晰
就可以看出像素大小是不确定的。
那么如何知道该显示屏下像素的大小呢——用该屏幕的ppi值计算出来。
公式为:像素物理长度 = 1/ppi,单位为英寸。
由此,我们可以知道了——当不同类型的屏幕的单个像素物理长度不同时,相同的px个数物理长度不同。
同时,众所周知的,分辨率有好多种,如1280×720,1920×1080等。例如1280×720,其意义就是该屏幕水平方向由1280个像素,垂直上有720个像素。
所以,由此可得——当不同类型的屏幕的水平及垂直方向上的像素个数不同时,相同的px个数,在该屏幕的水平,垂直方向上所占的比例是不同的。
进一步的思考及解决方案
通过以上的内容学习,大家应该就能理解为什么相同的px个数,在不同类型的屏幕下——尤其pc端到移动端——字体大小不同、屏幕边缘部分留白或过长失真了吧。
但是,光用px来构建网站是远远不够的。因为我们期望的是同一个网站,在不同的终端上有1.一致性,2.响应式——这两者其实是对立的,一致性是不同终端页面内容及布局都是相同的,响应式是根据终端类型改变来改变布局以使页面更友好——的特点,不希望有比例失真或屏幕内容过小过大的情况。
而解决这些问题,我们通常使用rem,em,自适应式建站,响应式建站。
篇幅所限,在下一章中再来讨论。
参考资料
- 市场常见屏幕尺寸以及分辨率:https://wenku.baidu.com/view/42bedab284254b35effd3416.html
- 为什么同样大小的像素在移动端和pc端看起来不一样:https://www.jianshu.com/p/4583755b4f69
最新文章
- React基础知识
- flume+sparkStreaming实例 实时监控文件demo
- target与currentTarget区别 ( html是弹窗居中的例子)
- linux系统文件说明
- 前端神器Sublime Text3 常用插件&;常用快捷键
- android 用NineOldAndroid实现的弹出按钮
- 电梯调度--c++--软件工程
- IE JS编程需注意的内存释放问题
- Centos7 安装redis3.2.3 过程
- 【转】Adobe CC 的下载地址
- 跨平台的CStdString类,实现了CString的接口
- ios面试汇总
- acdream 1431 Sum vs Product
- JSON数据传递
- String详细学习
- SparkStreaming读取Kakfa数据时发生OffsetOutOfRangeException异常
- @无痕客 https://www.cnblogs.com/wuhenke/archive/2012/12/24/2830530.html 通篇引用
- java中获取系统的当前时间
- php解析文本文件呈现在表格上
- mySQL数据库一:数据类型
热门文章
- LVS+keepalived负载均衡
- CSRF Token介绍与应对策略
- 使用 NLog 给 Asp.Net Core 做请求监控
- 使用Akka的远程调用
- 从一亿个ip找出出现次数最多的IP(分治法)
- 大数据技术之_19_Spark学习_03_Spark SQL 应用解析小结
- javascript数组的常用算法解析
- 分布式日志框架Exceptionless之生产环境部署步骤
- Android版数据结构与算法(二):基于数组的实现ArrayList源码彻底分析
- c#根据路径(url)下载图片