[郑州|结业弟子]JS-高雪峰|2017年03月14日的日报-技能树.IT修真院

发表于： 2017-03-14 21:10:47

2 714

今天完成的事情：今天的进度没有计划的快。上午才把导航栏部分做完，然后重新编写下边三个下拉菜单的样式，下午开始小课堂的知识查找和制作，截止到目前，任务6的下拉菜单样式还没有做完。

明天计划的事情：重新学习一下bootstrap框架里下拉菜单的部分，试着简写代码，较少div的嵌套，看看能不能实现同样的东西出来。完成任务12，开始学习任务13。

遇到的问题：

第一个是导航栏任务组的垂直居中问题，今天在网上找了几个垂直居中的方法，除了flexbox没有尝试外，最后还是选择了定位然后使用transform属性的方法，虽然代码过多，不兼容IE8，但是效果挺好。我是一个div里套了两个按钮，div没有设置高宽，全凭按钮的padding撑起来，开始使用定位，然后top\right\left\bottom都为0且margin：auto时虽然按钮居中了，但是父元素div和导航栏同宽同高，把header的背景色掩盖了，没有达到想要的效果。由于右侧还有一个图标，使用display:table的方法，自适应方面有点问题，也没有采纳。

第二个是今天小课堂讲的手机分辨率和网页px的关系。找到的资料，看完了感觉网页px应该就是css像素，虽也是个基础小块，但是个虚拟的单位，只是用于计算机的控制，分辨率则是实体显示屏的物理像素的大小的表述，用纵横向像素点相乘表示，讲到网页如何转化到不同分辨率大小的显示器上显示时，有点懵，虽讲了ppi，dpi，meta标签中name="viewport"和设备像素比这几个概念，但是没有很好地串联起来！具体怎么运作没有一个比较清楚的认识。

收获：总结一下今天小课堂的内容：

手机分辨率和网页中的px是一回事吗？

1.背景介绍

在我们从设计人员那里拿到网页模板时经常要按照模板的尺寸进行网页的代码编写，做出模板的样子来显示到不同的分辨率的设备上，我们通常使用像素这个单位作为我们进行网页制作的单位，那么像素和设备的分辨率之间是一样的概念吗？又或者有什么不同？

2.知识剖析

2.1像素的概念

像素（pixel)，全称为图像元素，是表示显示器或图像显示大小的基本单位。

又可以分为物理像素和设备独立像素（dips:device-independent-pixels)来进行分析。

1. 物理像素：指显示器上显示大小的基本单位。它是个物理部件，由红、蓝、绿三色次像素等部件组合而成。

2. 设备独立像素：可以认为是计算机坐标系中的一个点。这个点代表一个可以由程序使用并控制的虚拟像素。

2.2 分辨率的概念

分辨率（Resolution)，是一个表示平面图像精细程度的概念，它通常是以横向和纵向点的数量来衡量的，表示为水平点数*垂直点数的形式，例如1366px*768px。分辨率的概念在具体的划分中，有分为显示分辨率、打印分辨率、扫描分辨率等概念。

显示分辨率：显示器在显示图像时的分辨率，用点来衡量，在这里，点的概念其实就是物理像素。跟屏幕大小和显示部件的技术有关，固定值。

打印分辨率：直接关系到输出打印的图像或者文字质量的概念，用dpi(dot per inch)表示，即每英寸能够打印多少个点。

扫描分辨率是一种输入分辨率，而显示分辨率和打印分辨率都是输出分辨率。我们在使用扫描仪扫描图形时可以根据需要调节扫描的精度，不像显示分辨率和打印分辨率是固定的或只有几种可选。扫描分辨率也用dpi来表示，但它不像打印机那样垂直分辨率和水平分辨率是一致的，扫描仪的水平分辨率是垂直分辨率的一半。

PPI：Pixel per Inch，每英寸的像素数，衡量图像分辨率，也就是显示分辨率。

3.常见问题

问题一: 用代码编写的网页大小是如何显示到设备上的，展现相同效果的？

4.解决方案

这里要引入设备像素比(dpr)的概念，它定义了物理像素和设备独立像素之间的关系。

其公式表述为：设备像素比=物理像素/设备独立像素（在某一方向上，x方向或者y方向）。

我们还可以通过PPI/160来获得设备像素比。对于真实像素密度等于像素密度等级上的逻辑值的设备，1dp = 1/160 inch，对于不等于逻辑值的设备，比如上述表格第二个设备，180.27 != 160 这个差值 android 操作系统会进行等比缩放来弥补。比如在这个设备上用的 160dp 到最后真正在屏幕上用多少个像素表示呢，这其实经过了 2 个步骤：

1. dp 转程序中的 px，按照 dp 转 px 的公式，在设备上如果 160dp=160px，160dp 和我们程序里面用 160px 完全等价。

2. 程序中的 px 转显示屏上的 px，程序中160px 在设备显示屏上用的是 180 px。160px -> 180px 这个过程是android操作系统自动完成的，我们不需要关心