9.1.2 布局方法

9.1.2 布局方法

以下是几种常见的布局方式,没有一种布局方式可以适用于所有的情景,事实上还有一些混合的布局方式。

1.固定(fixed)布局

对于固定布局,整个页面和每一栏都有基于像素的宽度。顾名思义,无论使用手机和平板电脑等较小的设备查看页面,还是使用桌面浏览器并对窗口进行缩小,页面的宽度都不会改变。固定布局是学习CSS时最容易掌握的布局方式。

2.流式(fluid或liquid)布局

流式布局使用百分数定义宽度,允许页面随显示环境的改变进行放大或缩小。这种方法后来被用于创建响应式(responsive)布局和自适应(adaptive)布局,这些布局方式不仅可以像传统的流式布局那样在手机和平板电脑上缩小显示,还可以根据屏幕尺寸以特定方式调整其设计。这就可以在使用相同HTML的情况下,为移动用户、平板电脑用户和桌面用户定制单独的体验,而不是提供3个独立的网站。

3.弹性布局

弹性布局对宽度和其他所有属性的大小值都使用em,从而让页面根据用户的font-size设置进行缩放。