揭秘CSS(第 1 版)
9.1.2 流式布局
阅读(

概述

CSS选择器

字体和文本

盒模型

元素的定位

链接和导航

表格和表单

变换、过渡和动画

布局

基本布局类型

固定布局

流式布局

在移动终端兴起的时代,可以预见的是,未来还会涌现出更多大小不一的屏幕,人们需要一种灵活的、能够适应未知设备的方法,使得我们的设计在所有屏幕中都能完美显示,这就催生了流式布局。

使用流式布局时,尺寸不再使用像素,而是使用百分百进行设置。这种布局可以自适应用户的分辨率,并根据浏览器窗口尺寸自由伸缩,非常高效的利用空间。当浏览器窗口变大,元素的尺寸会变宽,当浏览器窗口变小,元素的尺寸也会跟着变小。页面周围的空白区域在所有分辨率和浏览器下都是相同的,在视觉上更美观。如果设计良好,流式布局可以避免在小分辨率下出现水平滚动条。

使用百分比布局后,页面就能根据窗口尺寸自由伸缩,高效利用空间。但是,流式布局也不是没有问题。在浏览器窗口变得很小时,元素的会变得很窄,很难阅读。因此,常常需要添加以 px 或 em 为单位的 min-width,以防止布局变得太窄。但是,如果 min-width 设置的太大,流式布局的灵活性就会大打折扣。

与之相反,在超大显示器上,这种设计看起来可能宽得可笑,文本行就变得太长,阅读起来非常困难。可以采取几个措施来避免这个问题。首先,元素只跨越窗口宽度的一部分,比如90%,而不是整个浏览器窗口。其次,可以使用百分比为元素设置内边距和外边距,这样的话,内边距和外边距宽度将随窗口尺寸而变化,防止设计变得过宽。再次,可以使用媒体查询,针对不同的窗口尺寸,为元素设置不同的宽度。最后,对于非常严重的情况,可以使用 max-width 属性,为最外层的容器设置最大宽度,以防止页面无限制的扩张。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验