移动端流体布局的一种布局方法

李春鹏 李金友

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

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

一、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英寸，那么印刷设备就可以刚好把一个像素作为一个取样点，印刷完成后图片的保真度是百分之百。在大多数情况下，这几个数值都不那么整好，因此保真度会产生损失。

二、css中px、em和rem三种单位

国内的网站开发者们大都喜欢用px作为编辑网书写的逻辑单位，而国外的网站大都喜欢用em和rem，三者的区别为：

1.PX长度单位

IE无法调整那些使用px作为单位的字体大小；

国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；

Firefox能够调整px和em，rem，但是有大部分的国产浏览器使用IE内核。

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。（引自CSS2.0手册），px单位，具有绝对特性，与分辨率挂钩。

2.em是相对长度单位

相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合： 1em=16px。那么12px=0.75em，10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px， 这样12px=1.2em， 10px=1em， 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。em会继承父级元素的字体大小。所以我们在写CSS的时候，需要注意两点：

1） body选择器中声明Font-size=62.5%；

2） 将你的原来的px数值除以10，然后换上em作为单位；

3） 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

简单的理解em就是一种相对单位，与之大学挂钩，会根据字体大小而改变自己的大小，在设计流体网页中灵活性非常高。

3.rem长度单位

rem是CSS3新增的一个相对单位（root em，根em），使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。Rem与根元素的字号挂钩。

三、移动端的逻辑分辨率

移动端的分辨率一般最小不会小于320像素，最大不超过640像素。这里所说的分辨率是逻辑分辨率，而不是通常所说的手机分比率。比如iphone6 plus的分辨率为：1080*1920（有一些设计者称实际分辨率：1242*2208），而它的逻辑分辨率为：414*736。没有超过640，通过页面缩放技术进行缩小而不会失真。而如果是ipad，分辨率为：1563*2048，而它的邏辑分辨率则为768*1024，所以，如果设置640的页面，会在竖屏出现白边。所以我们制作网页是要充分考虑到不同的移动终端，设计不同的显示比例。才能使我们所设计的网页在多种移动端显示时，不会显示失真。

其次，常见的流体布局一般分两种，一种是全屏流体设计，另一种是固屏流体设计。

四、开发移动流体网站所具备必要的知识

做移动站有一个必要的知识，就是关于屏幕宽度以及缩放问题。我们习惯的在标签之间增加一个标签：

//窗口设定

Name=”viewport”

//页面大小屏幕等宽

Width=device-width

//初始缩放比例，1.0表示原始比例大小

Initial-scale=1.0

//允许缩放的最小比例

minimum-scale=1.0

//允许缩放的最大比例

maximum-scale=1.0

//用户是否可以缩放，这里no表示不可以

user-scalable=no

上面最大最小比例其实就已经限制了无法缩放了，和最后一个是否可以缩放有同样的功能。

因为不同的手机，分辨率都不同，图片一定要能够自适应等比例缩放，才能保证布局的正确性。

//设置max-width后，图片才开始自适应

img{

display：block；

max-width：100%；

}

第五.媒体查询显示设计

在大于480小于640之间的显示设计方法为：

@media （min-width ：480px） and （max-width：640px）{

字号调试显示合适为止

{

媒体查询小于480设计方法：

@media （max-width ：480px） {

字号调试显示合适为止

}

通过在css样式表中加入以上代码，就可以有效的控制页面在不同媒体上的完整显示

总之，对初学者来说，一定要弄清楚一些流体布局的一些基本概念，多多动手实践，多看别人开发的网站，进行模拟、总结，从简单入手，逐步深入，相信大家经过一段时间的训练，都能成为流体布局的高手。

【参考文献】

[1]HTML5基础知识 核心技术与前沿案例，人民邮电出版社，2016.10.

[2]html5+css3从入门到精通 web前端开发 吉林大学出版社 2017.11.

[3]HTML5第一季视频教程 北风网 2015.1.