1、固定宽度布局：为网页设置一个固定的宽度，通常以px做为长度单位，常见于PC端网页。
2、流式布局：为网页设置一个相对的宽度，通常以百分比做为长度单位。
3、栅格化布局：将网页宽度人为的划分成均等的长度，然后排版布局时则以这些均等的长度做为度量单位，通常利用百分比做为长度单位来划分成均等的长度。
4、响应式布局：通过检测设备信息，决定网页布局方式，即用户如果采用不同的设备访问同一个网页，有可能会看到不一样的内容，一般情况下是检测设备屏幕的宽度来实现。
注：以上几种布局方式并不是独立存在的，实际开发过程中往往是相互结合使用的。
响应式布局Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不一样展示给用户的网页内容也不一样，我们利用媒体查询可以检测到屏幕的尺寸（主要检测宽度），并设置不同的CSS样式，就可以实现响应式的布局。
我们利用响应式布局可以满足不同尺寸的终端设备非常完美的展现网页内容，使得用户体验得到了很大的提升，但是为了实现这一目的我们不得不利用媒体查询写很多冗余的代码，使整体网页的体积变大，应用在移动设备上就会带来严重的性能问题。
响应式布局常用于企业的官网、博客、新闻资讯类型网站，这些网站以浏览内容为主，没有复杂的交互。
响应式开发
什么是响应式开发
在移动互联日益成熟的时候，桌面浏览器上开发的网页已经不能满足移动端的设备的展示和阅读
之前，通常的做法是对移动端单独开发一套特定的版本
但是，如果移动终端设备起来越多的时候赋发成本太大，是因为需要做所有屏幕的适配
响应式开发的目的就是:一个网站能够兼容多种终端
在新建的网站上一般都会使用响应式开发
移动web开发和响应式开发是必须具备的技能
演示响应者页面
响应式开发的原理：媒体查询：
查询媒介，查询到当前屏幕(媒介媒体)的宽度，针对不同的屏幕宽度设置不同的样式来适应不同屏幕。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。简单说，你可以设置 不同屏幕下面的不同的样式，达到适配不同的屏幕的目的。
实现方式：通过查询screen的宽度来指定某个宽度区间的网页布局。
超小屏幕 （移动设备） w<768px
小屏设备 768px-992px 768 <= w <992
中等屏幕 992px-1200px 992 =< w <1200
宽屏设备 1200px以上 w>=1200
CSS 语法
@media mediatype and|not|only (media feature) { CSS-Code; }