李春鹏 李金友

【摘 要】流体布局在现在的网页显示中越来越得到广泛的普及应用，这也是在现代网站开发中所必须要考虑的问题，一个好的网站应该能够在多种终端上进行显示，如何协调好流动布局与固定宽度布局的转换是现在网站开发中必须解决的技术问题，本文就流动布局的布局方式，进行了简单的阐述，仅供大家借鉴和商祺。

【关键词】移动端；流体布局

一、PPI和DPI两种单位

屏幕像素密度ppi：是英文Pixels Per Inch的缩写，屏幕上每英寸可以显示的像素点的数量，即屏幕像素密度。I是英文Pixels Per Inch的缩写，意为像素每英寸。英寸是常用的长度单位，大约相当于2.54厘米。而像素是专用于荧幕的概念，指的是荧幕可以解析的最小的点。因此，PPI值得是像素在荧幕上的密度，PPI越高图像就越清晰。举例来说，如果电脑屏幕是2K分辨率，即1920×1080像素，它的图像宽为1920像素。而如果这个电脑屏幕的物理宽度是19.2英寸，电脑屏幕是分辨率就是1920/19.2=100PPI。

DPI是英文Dots Per Inch的缩写，意为点每英寸。可以把Dot理解为取样点，即物理设备可以解析的最小单位。在印刷时，它就可以作为印刷网点，而在鼠标等电子设备上，可以理解为最小操作阈值（即设备会把多么远的两个点当作一个点来处理）。仍然拿1920×1080像素的图片来举例子，如果印刷设备的解析能力刚好是100DPI，而且你要印制的纸张尺寸刚好是19.2英寸，那么印刷设备就可以刚好把一个像素作为一个取样点，印刷完成后图片的保真度是百分之百。在大多数情况下，这几个数值都不那么整好，因此保真度会产生损失。……