第 10 题:谈谈你对静态布局、自适应布局、响应式布局、弹性布局、流式布局的理解?

  • A+
所属分类:Web前端
摘要

描述:就是设定好的长和宽,大小不会改变,不管你多大的屏幕它都是那么大,分辨率是不会改变的


静态布局

  • 描述:就是设定好的长和宽,大小不会改变,不管你多大的屏幕它都是那么大,分辨率是不会改变的

  • 优点:这个对于开发者来说是最简单的一种布局方式,没有什么兼容性的问题

  • 缺点:当屏幕分辨率太低时,会展现出滚动条

  • 场景:传统 web 网站

自适应布局

  • 描述:不同屏幕分辨率下,保持原有展示方式。即元素的位置会变化而大小不会变化

  • 优点:页面能够兼容不同分辨率的设备

  • 缺点:屏幕太小会发生内容过于拥挤。所有的设备看起来都是一样的网站,不过是长度或者图片变小了,不会根据设备采用不同的展示样式

  • 场景:传统 web 网站

响应式布局

  • 描述:不同屏幕分辨率下,展示方式不同

  • 优点:一套代码兼容 web 端、平板、以及手机端网页

  • 缺点:工作量大、UI 设计也需要多个版本

  • 场景:同时兼容多种不同设备

弹性布局(em/rem 布局)

  • 描述:使用 em 或 rem 单位进行相对布局,在不同屏幕分辨率下页面所有元素的高宽都等比例缩放

  • 优点:所有屏幕的高宽比和最初的设计高宽比一样,或者相差不多,完美适应

  • 缺点:这种布局方式只是宽度自适应,高度却没有做到自适应

  • 场景:同时兼容多种不同设备

弹性布局(flex 布局)

  • 描述:目前比较流行的一种布局,使用传统布局难以实现一些复杂的布局,使用 flex 布局实现就变得非常容易

  • 优点:简便、完整、响应式地实现各种页面布局

  • 缺点:只兼容 IE10+的浏览器

  • 场景:三栏式布局、垂直水平居中布局

流式布局(百分比布局)

  • 描述:页面元素的宽度按照屏幕分辨率进行适配调整,但整体布局不变。主要特征是像瀑布一样往下流,有规律的无限遍历模块。

  • 优点:灵活,充分利用浏览器的空间

  • 缺点:宽度按照屏幕进行适配调整,对于大屏幕来说用户体验并不是特别好,有些布局元素会显得很长

  • 场景:类似抖音视频、微博消息、微信朋友圈等布局

文章的内容/灵感都从下方内容中借鉴