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


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

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

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

      

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

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

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

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

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

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

      

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

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

      

  • 相关阅读:
    delphi 随意将函数执行权限提高到Ring0源代码
    delphi 使电脑睡眠代码
    delphi 监控文件系统
    在Delphi中使用系统对应文件类型的图标
    Panel
    delphi 读写记录类型文件Record
    C# winform 一次只能允许一个应用(使用mutex)
    winform捕获全局异常
    观察者模式实践-实现winform 窗体之间传值(事件实现)
    在wpf中利用异步lambda编程,模拟数据库连接,防止界面假死
  • 原文地址:https://www.cnblogs.com/snowcan/p/7528404.html
Copyright © 2020-2023  润新知