理解流式布局和响应式布局

古城微笑少年丶 2022-05-21 22:29 276阅读 0赞

## 流式布局： ##

流式布局在CSS2时代就有，主要是靠百分比进行排版，可以在不同分辨率下显示相同的版式。

流式布局：网页中主要的划分区域的尺寸使用百分数（搭配min-\*、max-\*属性使用），例如，设置网页主体的宽度为80%，min-width为960px。图片也作类似处理（width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）。

这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那是屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：宽度使用百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。

## 响应式布局： ##

响应式布局的关键技术是CSS3中的媒体查询，监测设备屏幕大小，通过css媒体查询来有针对性的更改页面的布局，可以监测屏幕方向(移动设备)，设备类型等等，核心在于感知。在不同屏幕下可以显示不同版式。响应式是用于解决不用设备之间不用分辨率之间的兼容问题(一般是指PC，平板，手机等设备之间较大的分辨率差异)

响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出令人满意的效果，

嗯，因为是css3时代才有的新技术，那坑爹的IE6、7、8铁定不支持了，所以，记得使用媒体查询的时候要用js做一下小小的兼容哦！

对于IE6/IE7/IE8浏览器，我们使用JavaScript，根据用户显示器的分辨率，为其动态创建一个CSS 文件，在头部head标签中嵌入如下的code：

对CSS编写者而言，在实现上不拘泥于具体手法，但通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用。

参考文章：[响应式布局和流式布局的区别][Link 1]、[响应式布局][Link 2]、[几种常见的网页布局][Link 3]

[Link 1]: https://www.zhihu.com/question/21679928
[Link 2]: http://www.zhangxinxu.com/wordpress/2011/09/%E9%A1%B5%E9%9D%A2%E5%93%8D%E5%BA%94%E5%B8%83%E5%B1%80/
[Link 3]: http://www.cnblogs.com/yanayana/p/7066948.html