常用的布局方式

1.流式布局。

网页中主要的划分区域的尺寸使用百分数,常见的就是宽度百分比，高度和字体px写。
缺点：：宽度使用百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。
流式布局在CSS2时代就有，主要是靠百分比进行排版，可以在不同分辨率下显示相同的版式

2.响应式布局。

随着CSS3出现了媒体查询技术，出现了响应式设计的概念。响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出令人满意的效果，对CSS编写者而言，在实现上不拘泥于具体手法，但通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用。
响应式布局的关键技术是CSS3中的媒体查询，可以在不同分辨率下对元素重新设置样式（不只是尺寸），在不同屏幕下可以显示不同版式

一般来说响应式布局配合流式布局效果更好