网站设计主要有两大类型：固定宽度和响应式。
对于固定（fixed）布局，整个页面和每一栏都有基于像素的宽度。顾名思义，无论是使用移动电话和平板电脑等较小的设备查看页面，还是使用桌面浏览器并对窗口进行缩小，它的宽度都不会改变。在引入响应式Web 设计之前，这是大多数网站选用的布局方式，它也是学习CSS 时最容易掌握的布局方式。
响应式页面也称为流式（fluid 或liquid）页面，它使用百分数定义宽度，允许页面随显示环境的改变进行放大或缩小。除了具有流动栏，响应式页面还可以根据屏幕尺寸以特定方式调整其设计。例如，可以更改图像大小或者调整每一栏，使其大小更合适。这就可以在使用相同HTML的情况下，为移动用户、平板电脑用户和桌面用户定制单独的体验，而不是提供三个独立的网站。
没有一种布局方式可以适用于所有的情景。不过，随着智能手机和平板电脑的广泛出现，未来一定还会出现各种不同尺寸的智能设备，因此在设计网页时有必要将网站做成响应式布局。这也是每天都有大量响应式网站出现的原因。
【拓展】
响应式Web设计起源于Ethan Marcotte，他创建了术语“响应式Web设计”（responsive Web design），并向大家介绍了创建响应式网站的技术。人们首次广泛关注这种方法始于他发表在A List Apart上的文章（www.alistapart.com/articles/responsive-web-design/）。他在Responsive Web Design一书中对此作了更为深入细致的探讨。
Ethan Marcotte的方法包含以下三点。
- 灵活的图像和媒体。图像和媒体资源的尺寸是用百分数定义的，从而可以根据环境进行缩放。
- 灵活的、基于网格的布局，也就是流式布局。对于响应式网站，所有的width属性都用百分数设定，因此所有的布局成分都是相对的。其他水平属性通常也会使用相对单位（如em、百分数和rem 等）。
- 媒体查询。使用这项技术，可以根据媒体特征（如浏览器可视页面区域的宽度）对设计进行调整。
John Allsopp于2000年发表“Web 设计之道”（“A Dao of Web Design”，http://alistapart.com/article/dao），该文讨论了设计和构建灵活的网站的方法。这篇文章是响应式Web 设计的先驱，Marcotte 以及很多其他作者都引用过这篇文章，影响巨大。Jeremy Keith 在题为“One Web”的演讲中归纳了“一个网站适应所有设备”的方法。
【参考】
Screen Sizes 网站（http://screensiz.es）提供了流行设备和显示屏的分辨率和设备宽度信息。使用媒体查询的时候，这些信息很有用。
Maximiliano Firtman 维护了一个现代移动设备对HTML5 和CSS3 支持情况的表格，参考http://mobilehtml5.org。其中大量信息属于HTML5 高级特性。