HTML5响应式布局（一）

移动端开发的布局方式——流式布局

流式布局这个概念第一次接触会觉得这个概念很高端，但是进行深入了解之后就会发现其实很简单，有HTML桌面端网页开发经验基础的人来说，实际上流式布局就是把桌面端一些写死的布局改成了百分比，用于适应各种移动端的尺寸。

流式布局通俗来讲也可以称为百分比布局，通常包含了以下几点:

• 宽度百分比

• 定位百分比

• 用em, 以及rem进行替换px

• 弹性图片 设置这些百分比的参照物是根据手机的屏幕尺寸进行适配的，通过尺寸适配达到一定的效果。

为什么需要用到流式布局进行适配移动端？

固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。但这种方法不是一种完全兼容未来网页的制作方法，我们需要一些适应未知设备的方法。固定像素尺寸（960/980）经不起未来考验。

如何用百分比来布局页面？

尺寸百分比：

将网页从固定布局修改为百分比布局:

需要牢记的公式：目标元素宽度 / 上下文元素宽度 = 百分比宽度。

PS: 这里的上下文元素宽度所指的就是与他相关联的父级的元素宽度，这会直接影响到子元素的宽度百分比。

位置百分比：

基本跟尺寸百分比类似，就是将原本的固定边距或定位距离换算成百分比

例如：

跟页面左边50px 上下文宽度320px,那就是50/320=15.625%

保留5位小数点。

em:

em的作用一般来说是设置字体大小，在其父级中设置一种标准的字体大小，通过em来控制字体的百分比。

• em的值并不是固定的；

• em会继承父级元素的字体大小。

rem:

虽然说em可以实现字体的百分比显示从而根据屏幕大小的不同按照比例改变字体大小，但是在实际开发过程中一旦出现结构嵌套，导致父级的字体比例改变，子元素的字体会根据父级的字体改变而按比例变动，如果用em改变字体，计算量会很大，难免对开发会造成一定的负担。

css3中推出了一种新的单位rem，这种单位只会基于HTML标签进行变动。

rem全称为root em, em的根便是html, 也就是只根据html进行比例变化。

弹性图片:

图片设置width:100%,或者background-size:100% 100%。

图片设置阀值:max-width.

可是设置图片的最大值和最小值。

当然流式布局只是移动端适配的一种方式，还打不到响应式网页的效果。之后我会向大家介绍另外一种适配方式，叫做媒体查询，两种适配方式相结合才能达到最终的响应式布局效果。

以上就是HTML5响应式布局基础（一）的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！