网站建设

除了使用viewpoint和Media Query外, 在代码中, 对width的设置是以百分号的形式赋值的, 这就是要实现响应式布局的第三个技术, 即流式布局。

流式布局英文名称为Liquid Layout, 流式布局是指网页页面中各部分按照一定的百分宽度比来设置。例如说像刚才例子中对类left和right的设置所使用到的两栏布局的网页, 当左侧栏占50%宽, 右侧栏占50%宽的时候就是两栏布局, 如果把左侧栏与右侧栏都设置为100%宽的时候, 这个网页的布局就从左右两栏变成了上下两栏的布局了。

使用流式布局对于响应式设计来说就是一个很好的选择, 可以确定网页中的元素保持一定的百分比呈现出来, 比固定宽度的设置的灵活性更好。