静态布局自适应布局流式布局响应式布局弹性布局简析

Posted 2020-10-07 那一季的银杏叶

　　近期学习，有很多感想，有时候看似相近的概念，其实意义却不相同。所以学习要针对不同的名词有明确的区分意识。

　　抽空时间，打算学习下display:flex;本以为就是一个小小的知识点，正式去研究的时候，才发现display:flex;有很多内容，能实现很多效果。比如三栏布局（左右两栏固定，中间栏自适应），圣杯布局。

　　后来想着经常听到流式布局，自适应布局，响应式布局，他们有什么区别呢，就去搜了许多内容查看，才发现每种布局都有优缺点和不同使用场景。

　　

　　静态布局：给页面元素设置固定的宽度和高度，单位用px，当窗口缩小，会出现滚动条，拉动滚动条显示被遮挡内容。针对不同分辨率的手机端，分别写不同的样式文件。

　　自适应布局：创建多个静态布局，每个静态布局对应一个屏幕分辨率范围，使用@media媒体查询技术。

　　流式布局：元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化。屏幕尺度跨度过大的情况下，页面不能正常显示。

　　响应式布局：采用自适应布局和流式布局的综合方式，为不同屏幕分辨率范围创建流式布局。

　　弹性布局：要点在于使用em和rem单位来定义元素宽度，与流式布局有极大的相似性，但也有不同之处，主要区别在于弹性布局的尺寸主要根据字体大小而变化。

 

　　至于display:flex;相关知识，我就不赘述了，推荐阮一峰的博客http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

　　

　　具体选择哪种布局方式，要根据需求确定。

　　（内容不尽详细，只是对学习内容简单总结，若要深入研究，可找更详尽内容学习）