1、固定宽度布局：为网页设置一个固定的宽度，通常以px做为长度单位，常见于PC端网页。
这种布局方法对规划师和CSS编写者来说都是最简略的，亦没有兼容性问题，缺陷显而易见，即不能依据用户的屏幕尺度做出不同的体现。
2、流式布局：为网页设置一个相对的宽度，通常以百分比做为长度单位。
这种布局方法用来应对不同尺度的PC屏幕，但缺陷显着：宽度运用百分比定义，可是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显现作用会变成有些页面元素宽度被拉的很长，可是高度、文字大小还是和本来一样，显现十分不协调。
3、自习惯布局：分别为不同的屏幕分辨率定义布局，同一个网页在不调整页面布局的前提下习惯各种不同的终端设备，这儿着重的是网站页面布局不发生变化，也便是可以依据屏幕尺度调整整个网页的大小。
很显着能够发现，产品的排列方法并没有由于终端屏幕的大小而发生变化，也便是说同一个网页的基础上进行了调节的进程。
4、呼应式布局：经过检测设备信息，决议网页布局方法，即用户假如采用不同的设备拜访同一个网页，有可能会看到不一样的内容，一般情况下是检测设备屏幕的宽度来实现。
可以看到PC端为三列，平板端的产品分为两列展现，但手机端的则是一列，在保证描绘清晰的前提下进行纤细的页面布局调整，这便是呼应式与自习惯最大的差异。
注：以上几种布局方法并不是独立存在的，实践开发进程中往往是彼此结合运用的。
