CSS像素 物理像素 分辨率 PPI
虽然自己平时也在写响应式的网站，但是对于像素，分辨率，物理像素几个概念还是有点理不清楚，下面是我看了一些文章和自己的总结记录下来的文章，以免后面自己又忘记。
这里着重参考了 第一篇文章：http://www.jianshu.com/p/c3387bcc4f6e
第二篇文章 ：https://segmentfault.com/a/1190000004383049
什么是英寸？屏幕尺寸的计算。
一般说手机多大，都是说手机多少寸，但实际应该说是英寸，因为手机发布出来的时候都是以英寸为单位。见下图：
主屏尺寸5.2英寸就是手机尺寸大小，这个不是面积，它是长度。另外换算成厘米是 1英寸x2.54厘米
他不是面积单位，那长度指的是手机什么地方的长度呢？应该是对角线的长度（长度为物理长度，理解为拿直尺量出来的）。见下图：
分辨率是什么？
分辨率指的是一个固定大小的屏幕有多少个像素。
那像素又是什么？见下图
上图中一个个一个小格子就是像素，一个格子就是一个像素。像我的电脑分辨率为1920像素*1080像素，
可以理解为横排有1920个小格子，竖排有1080个小格子。他们组合起来形成了1920*1080分辨率。所以，可以说像素是分辨率的单位。
像素密度
像素的密度是指对角线为一英寸长时有多少个像素小格子，见下图
左边的5.2英寸，我取其中一英寸长度，放大就是右边图，红框内就是一英寸长作为红框的对角线。这个红框内能容纳多少像素，就是这个手机的像素密度。（存疑）
下面图是像素密度，分辨率和屏幕尺寸的公式。
按上图横向是1080px²+纵向1920px²再开平方就得到了对角线的像素个数，就是勾股定理求第三条边公式。得到对象线像素的个数再除以对角线长度，就是每英寸有多少个像素了，这就是 像素密度（PPI）。
像素的大小不是固定的。
上面第一张图是苹果手机屏幕参数，第二张图是华为手机屏幕参数。
先看苹果手机，屏幕为5.0英寸，需要容纳1920*1080个像素，而华为5.2英寸，也是容纳1920*1080个像素。也就是说苹果手机的一个像素要比华为手机的一个像素要小才能容纳得下相同个数的像素。一英寸为对角线的长方形内的像素多少就是整个屏幕的像素密度了。
电脑的分辨率调节是如何调节的
上图中分辨率可以随意选择调节。最高是1366*768(推荐的)，也就是说屏幕大小的像素个数，横为1366个像素，竖为768个像素。这个横竖的像素多少其实是固定的，在厂商做这个屏幕的时候就已经设置好的。当上面调整分辨率的时候，比如调整成800*600的时候，难道意思是横800个像素，竖600个像素吗？其实不是的，调成800*600之后他的横竖的像素个数还是一样多的，因为前面说了，出厂的时候像素多少屏幕就已经设置好了的。当调成800*600，其实是有效像素个数为800*600，其余少的像素格子就用模拟色彩块填充。所以分辨率的大小比较其实是不同设备，不同屏幕之间才会有分辨率大小的区分。同一台设备的分辨率其实已经在出厂的时候已经设置好了。
-------------------------------------------------------------移动端分辨率----------------------------------------------------------------
本来想晚上再查一下，为什么pc电脑已经设置好了分辨率多少，像素大小了，还要给出很多选择呢，感觉多余。结果看到了手机端的物理像素和css像素问题，觉得自己还有很多没搞懂。
参考文章：http://www.cnblogs.com/2050/p/3877280.html
css的1px和设备上的1个物理像素完全是两个概念。只是在pc端，一个物理像素就等于一个css的1px长度而已。所以你在网页中用css设置元素长度1920px，在分辨率为1920px*1080px分辨电脑上，长度刚好相等。
pc端一个物理像素就等于一个css的1px长度，所以很简单，不用我们操心。
但是在移动端一个css的一个像素就不等于设备的一个物理像素了。那css的像素和移动端设备的物理像素怎么换算呢，我也没搞明白，只知道在iphone3的分辨率为 320px * 480px时的一个物理像素与css的一个像素相等。从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。
这里出现了关于移动端的三个概念：
一个是layout viewport 一个是visual viewport 还有一个是ideal viewport
最后一个最重要，就是ideal viewport ，他是完美适配移动端的viewport,我们css的长度320px和这个设备的 ideal viewport 320相等
另一个很重要的是我们写响应式的时候，用@media screen and (max-width:320px) 媒体查询的时候，查询的其实就是这个ideal viewport ，而且我们浏览器移动端调试尺寸也是这个ideal viewport 。
ideal viewport 长宽等于 设备的尺寸长宽 又和css的一个像素值相等。所以这个是最理想的ideal viewport 。
ideal viewport并没有一个固定的尺寸，不同的设备拥有有不同的ideal viewport。
移动设备默认的viewport是layout viewport（不明白layout viewport的看我上面推荐的那篇文章），但在进行移动设备网站的开发时，我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢？这就该轮到meta标签出场了。
我们在开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们的head标签中：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
在开发响应式移动端时候，有很多概念没搞清，写这边文章也是督促自己去看其它资料来搞明白。现在搞清楚了一些，还有一些没搞清楚。
比如，设计师设计移动端页面大小应该是多少，768px*1024px吗？这个是ipad mini平板的尺寸。那做成手机端应该如何切图？
CSS像素 物理像素 分辨率 PPI相关推荐
- html逻辑像素和实际像素,物理像素、逻辑像素、设备像素比、PPI、二倍图、css3盒子模型、布局视口、视觉视口、理想视口...
1.1物理像素 手机屏幕横向有828个点 手机屏幕纵向上有1792个点 同等大小屏幕下,点越多.图像显示越精细 上面所说屏幕上一个个点就是物理像素(physical pixel) 物理像素也叫设备像素 ...
- 二倍图（物理像素物理像素比，多倍图，背景缩放），移动端开发选择（移动端主流方案【单独制作移动端页面（主流），响应式页面兼容移动端（其次）】，移动端技术解决方案【移动端浏览器，特殊样式】）
二倍图 物理像素&物理像素比 物理像素指的是屏幕显示的最小颗粒,是物理真实存在的,我们开发的1px不一定等于1个物理像素,(PC端相同,移动端不一定相同) PC端和早期手机屏幕是 1CSS像素 ...
- 【CSS】物理像素 DP(device pixels)、物理像素比（DPR）、px 逻辑像素（CSS像素）、DPI、PPI 的概念解析 以及1px问题解决方法
物理像素 .物理像素比.物理像素比.px 逻辑像素概念解析 前言 一.前提概念 1.分辨率与物理尺寸关系 目前绝大部分显示器都是基于点阵的 同样的分辨率下,每个小点的尺寸仍然是可以大可以小的 DPI( ...
- 移动端布局介绍——css像素/物理像素/设备像素比
我们在网页后台看到的不同手机的分辨率是:css像素,设备的独立像素:见下图的红色框里的东西: 如果我们把这个页面截图下来在属性里看它的分辨率, 如下图所示: 发现这个分辨率其实是css分辨率的二倍, ...
- 图文并茂带你弄懂物理分辨率、分辨率、物理像素、逻辑像素、dpr、ppi
目录 物理分辨率和分辨率 什么是物理像素 什么是CSS像素 什么是设备像素比 什么是标清屏和高清屏 缩放 什么是PPI(DPI) 物理分辨率和分辨率 首先得知道物理分辨率和分辨率是2个概念,可别混淆. ...
- css像素px，物理像素（pt），设备像素比（dpr），1px边框问题，viewport自适应
关于 css像素px,物理像素(pt),设备像素比(dpr),1px边框问题,viewport自适应等问题. 目录 **关于 css像素px,物理像素(pt),设备像素比(dpr),1px边框问题,v ...
- CSS中的px与物理像素、逻辑像素、1px边框问题
一直不太清楚CSS中的1px与逻辑像素.物理像素是个什么关系(作为一名前端感觉很惭愧 -_-!),今天终于花时间彻底弄清楚了,其实弄清楚之后就觉得事情很简单,但也只有在弄清楚之后,才会觉得简单(语出& ...
- 移动端物理像素和设备独立像素
https://blog.csdn.net/aiolos1111/article/details/51880223 https://www.cnblogs.com/samwu/p/5341056.ht ...
- 移动开发之物理像素、物理像素比和二倍图
物理像素&物理像素比 物理像素点(分辨率)是指屏幕显示的最小颗粒,是物理真实存在的. 在PC端页面,1px等于1个物理像素:但在移动端,1px不一定等于1个物理像素. 物理像素比(屏幕像素比) ...
最新文章
- 专访腾讯云沙开波：从无到有，打造全球领先调度系统
- plsql oracle服务端,PLSQL Developer + Oracle客户端简易安装方法
- 声音处理之-梅尔频率倒谱系数(MFCC)
- Deep learning：十九(RBM简单理解)
- 用Cython加速Python到“起飞”
- ubuntu虚拟机进程被杀死_vmware虚拟机奔溃，如何抢救文件
- soltrace教程（2）旧版本项目导入新版本
- java groovy 乱码_解决Groovy复制文件的乱码
- 学而时娱之，不亦乐乎
- Python dummy variable
- jQuery Ajax 的使用 方法列表 详解教程
- mysql neq_neq、eq的用法，thinkphp框架下的
- 计及需求侧响应日前、日内两阶段鲁棒备用优化【IEEE6节点】(Matlab代码实现）
- 如何使同组 pod 被分配到不同节点上
- 用c语言，制作一个心形彩色告白图案（附源码）
- 优化Kubernetes横向扩缩HPA
- 从损失函数的角度详解常见机器学习算法(1)
- linux nfs 拒绝挂载,mount：被服务器拒绝的nfs访问
- 原生js实现轮播图——小肉包
- Cookie 攻防世界