1. DPI 和 PPI 是什么？

DPI ---- 最初用于衡量打印物上每英寸的点数密度，就是表示你的打印机可以在一英寸内打印多少个点。DPI值越小，打印的内容越不清晰。

当DPI的概念迁移到计算机屏幕上的时候，就应该称之为PPI 。同理：PPI就是表示计算机屏幕上每英寸可以显示的像素点的数量。

一、物理像素和css像素

1、物理像素
显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了。

2、css像素
设备的独立像素，也就是我们在css布局时的像素，逻辑像素与之间存在一个比例关系，默认情况下一个px和一个像素一一对应，是相同的。

可以在浏览器中打开F12控制台查看对应设备的css像素值：

三、设备像素比DPR

DPR = 物理像素(设备像素) / 独立像素(CSS像素)

当像素比为1:1时，使用1个物理像素显示1个CSS像素；当像素比为2:1时，使用4个物理像素显示1个CSS像素；当像素比为3:1时，使用9（33）个设备像素显示1个CSS像素。

例如：
iphone6 1css像素===2物理像素

iphone s5 1css像素===3物理像素

我们收到的设计稿只有一份，是物体分辨率，为了更清晰的像素。需要前端开发工程师手动除以设备像素比进行css布局。为了一份设计稿满足多设备，再布局时需要注意使用：

百分比
弹性盒布局
rem布局

四、viewport

通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。

五、viewport三理论：布局视口、视觉视口、理想视口

五、利用meta标签对viewport进行控制

<meta name="viewport" content="width=device-width,initial-scale=1.0">

width=device-width 表示理想视口等于设备宽度(css像素)

设置不允许用户捏放页面：

<meta name="viewport" content="width=device-width,initial-scale=1.0" user-scalable=no>

该meta标签的作用是让当
前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。

15-移动端布局基础——DPI、PPI、物理像素、DPR、viewportcss像素、DPR相关推荐

01移动端布局基础之流式布局
技术交流QQ群:1027579432,欢迎你的加入! 1.移动端基础浏览器现状 PC端常见浏览器:360浏览器.谷歌浏览器.火狐浏览器.QQ浏览器.百度浏览器.搜狗浏览器.IE浏览器等. 移动端常见 ...
05移动端布局基础之flex弹性布局项目实战(携程移动端首页)
技术交流QQ群:1027579432,欢迎你的加入! 1.携程网移动端首页打开网址:m.ctrip.com 2.技术选型方案:采取单独制作移动页面方案技术:布局采取flex布局 3.搭建相关文件 ...
02移动端布局基础之流式布局项目实战(京东移动端首页)
技术交流QQ群:1027579432,欢迎你的加入! 1.技术选型方案:采取单独制作移动页面方案技术:布局采取流式布局 2.搭建相关文件夹结构 3.设置视口标签以及引入初始化样式 ``` < ...
像素相关概念：PPI、DPI、设备像素、独立像素
前言我相信对于像素,英文「pixel」,缩写「px」,这个概念并不陌生吧,不管是设计师设计图片用的单位 px,还是前端工程师在 css 里面的单位 px等等,很多领域都会用到这个单位,但是当我问他们 ...
html逻辑像素和实际像素,物理像素、逻辑像素、设备像素比、PPI、二倍图、css3盒子模型、布局视口、视觉视口、理想视口...
1.1物理像素手机屏幕横向有828个点手机屏幕纵向上有1792个点同等大小屏幕下,点越多.图像显示越精细上面所说屏幕上一个个点就是物理像素(physical pixel) 物理像素也叫设备像素 ...
【CSS】物理像素 DP(device pixels)、物理像素比（DPR）、px 逻辑像素（CSS像素）、DPI、PPI 的概念解析以及1px问题解决方法
物理像素 .物理像素比.物理像素比.px 逻辑像素概念解析前言一.前提概念 1.分辨率与物理尺寸关系目前绝大部分显示器都是基于点阵的同样的分辨率下,每个小点的尺寸仍然是可以大可以小的 DPI( ...
移动端布局三种视口_前端基础：必须要知道的移动端适配（4）——视口
视口(viewport)代表当前可见的计算机图形区域.在Web浏览器术语中,通常与浏览器窗口相同,但不包括浏览器的UI, 菜单栏等--即指你正在浏览的文档的那一部分. 一般我们所说的视口共包括三种:布 ...
物理像素、CSS像素、dip、dpr、ppi、dpi
物理像素(physical pixel) 物理像素又被称为设备像素(dp),他是显示设备中一个最微小的物理部件.一个设备的物理像素是固定不变的.每个像素可以根据操作系统设置自己的颜色和亮度.所谓的一倍 ...
【移动端布局】1 -基本概念：设备像素、css像素、屏幕尺寸、像素密度ppi、像素比dpr、viewport、meta标签、样式重置
文章目录 0.关于web app 1.移动端与pc端的区别 2.尺寸相关概念 2.1.设备像素(物理像素) 2.2.CSS像素(设备独立像素,逻辑像素) 2.3.屏幕的尺寸 2.4.像素密度PPI - ...

15-移动端布局基础——DPI、PPI、物理像素、DPR、viewportcss像素、DPR

文章目录