页面布局整理汇总，让你彻底搞明白多种布局的关系
文章目录
- 常见页面布局方式
- 布局设计(大层面)
- 单独比较:响应式布局和自适应布局
- 布局技术(小层面)
- 单独比较:Flex Box和Grid Layout
- 响应式布局的开发原理
常见页面布局方式
根据个人理解从小层面(布局技术)、大层面(布局设计)两个维度介绍。
布局设计 是一个包含了很多布局技术的技术栈。随着web页面的丰富，内容越来越多，每个布局技术也不会单独存在，布局设计方式也在随着布局技术的发展越加丰富。
布局设计(大层面)
根据复杂度排列。
| 布局 | 英文 | 描述 | 实现方式(仅供参考) |
|---|---|---|---|
| 静态布局 | Static Layout | 内容尺寸是采用px 固定死的，不同尺寸下显示的元素布局和大小完全一样。不灵活，常见于PC端页面 | 用px作为宽高单位的布局，就是静态布局 |
流式(液态)布局 (百分比布局)
|
Liquid Layout | 宽高由百分比控制。屏幕窄，元素的宽就小；屏幕大，元素的宽就大，即元素宽高随屏幕尺寸变化 | 用百分比作为宽高单位的布局，就是流式布局， 但是随着vm vh rem等单位的出现也可以用这些单位实现 |
| 响应式布局 | Responsive Layout | 无论目标设备的屏幕尺寸是多少，都可以适应屏幕的尺寸；不同尺寸下显示的布局和元素的大小都会改变 |
Flex Box或栅格布局 + 媒体查询(用媒体查询宽高来控制切换某个布局，比如常见的:尺寸太窄时让导航栏收缩为一个三道杠的小图标) + 流式布局(一般采用流式布局宽度变化会更加平滑) + ···
|
| 自适应布局 | Adaptive Layout |
相比于上面几种布局，自适应布局为不同分辨率的设备分别设计了一套页面。比如手机浏览器、平板浏览器、桌面浏览器等，考虑到这些尺寸中的每一种，都必须为其设计一个布局。每个布局可以采用静态布局或流式布局或响应式布局等任何一种(比如淘宝网对手机浏览器和桌面浏览器做了不同布局的页面，这样就不需要为桌面浏览器再做成响应式布局，所以淘宝网的桌面布局是静态布局(大体上是静态布局，宽度太小第三列'今日热卖'会隐藏，这是个响应式布局)，这里还是具体情况具体分析)
|
媒体查询(根据不同分辨率或UA标识显示不同的页面) + 静态布局或流式布局或响应式布局
|
单独比较:响应式布局和自适应布局
参考资料1、参考资料2、参考资料3 (如果访问不了需要开代理，没有代理可以进群我给你发页面，只看我写的这些也足够了)
- 这两种方式都比较流行。google推荐使用RWD响应式设计(
如果你开了翻译，他会把Responsive Web Design翻译成自适应设计) - 响应式布局只需要开发一套页面，就可以适配不同的设备；自适应布局需要开发多套页面，但是对于复杂网站来说更加具有定制性(如果用响应式布局对这种复杂网站做高度定制化，需要很复杂的代码，维护性差)。
- 响应式布局的加载速度会慢一些，一套页面要适配从移动设备的小屏幕到桌面设备的大屏幕，cpu的计算量是几种布局设计中最大的。
- 自适应布局可以包含响应式布局，因为自适应布局是多套页面，响应式布局是一套页面，自适应布局的页面可以采用响应式设计。如此一来，采用自适应布局，对于差异大的尺寸变动(不同设备)，页面更具有定制化，而每套页面中采用响应式布局，又能做到对于差异小的屏幕(不同大小的桌面显示器或手机屏幕)，又能将其内容更好地展示出来。
- 分析淘宝网和百度cloud
- 这两个网站用PC查看的页面和用手机浏览器(可以用F12切换到手机设备)看到的页面是不同的，根据不同UA标识来返回不同的页面，是自适应布局，这对不同设备更加具有定制性。
- 进一步观察又会发现，这两个桌面显示的页面都是静态布局(淘宝宽度太小第三列’今日热卖’会隐藏，这是个响应式布局)，不管浏览器宽度怎么变化，内容都不会变；而手机浏览器显示的页面是响应式的，会根据不同尺寸把内容都展现在整个屏幕上，既不会溢出也不会留白。
- 关于自适应布局和响应式布局的选择：
- 个人更倾向于响应式布局，因为实际开发当中，大多数的页面并不会有淘宝那么复杂和出名，不需要对移动设备浏览器做到高度定制化(其实你会发现，淘宝对手机浏览器的这套页面，有些功能还是提示用户下载App使用)。
- 以企业站来举例，企业站没有太复杂的布局，很容易用响应式布局做到适配多端。
- 以商城举例，商城页面稍复杂，但如果不是淘宝这种大商城，没必要提供移动端的网页布局。移动端的需求可以做个App或小程序，PC端做成静态布局即可，因为复杂页面用静态布局更简单，更不容易出问题。
- 参考网上的一段话：响应式布局还是要比自适应布局要好一点，但是自适应布局更加贴切实际，因为你只需要考虑几种状态就可以了而不是像响应式布局需要考虑非常多状态。所以的说无论哪种设计都有它们各自的特点，我们要根据项目的需求来选择适合的布局方式。
布局技术(小层面)
布局技术层出不穷，他们的实现方式也有包含关系，比如弹性布局包含了float布局等等。
每个布局技术基本上不会单独存在，除非是在学习某个技术时做demo，比如只写个float的这种页面。真正的大型页面应该是某个布局设计，包含了很多布局技术。
| 布局 | 英文 | 描述 | 实现方式(仅供参考) |
|---|---|---|---|
| 弹性布局 | Flex Layout |
个人认为，很多人把弹性布局、flex box、响应式布局没有区分的那么细，新手容易看混。 个人认为网上大概有两种理解：1. 弹性布局是使用弹性盒(flex box)实现响应式布局的布局叫法，是一个布局设计 2.弹性布局就是flex box ，像栅格布局等一样，是一个布局技术个人倾向第二种理解，仅个人理解，欢迎大家斧正
|
css3的一种布局，本身封装了float、媒体查询、流式布局等 |
| 栅格(网格)布局 | Grid Layout | 将网页宽度人为划分为均等的长度，然后排版布局则以这些均等的长度作为度量单位。常见的有bootstrap栅格(12列)，semantic ui(是16列)，ant design(24列)，以及css的grid(教程:阮一峰，MDN) | 刚出现时通常利用百分比作为长度单位来划分成均等的长度。目前应该都结合了flex box等 |
| table布局 | 比较老的一种布局，参看：display:table布局 | table表格 | |
| float、inline-block··· | ··· | 还有很多布局，比如行内块，比如float等等，就不一一列出了，随着web的发展，每个布局并不是单独存在的 |
单独比较:Flex Box和Grid Layout
两者不相上下，都是用来做响应式布局。
比如bootstrap的栅格系统把屏幕宽度分为12等分，但是不能解决5等分和7等分的问题，此时就应该用flex box。
但是CSS出了个Grid，是Flex的加强版，好像是可以自定义等分，用display:grid声明，像是flex的升级版，只不过目前好像没多少人用。
w3school和菜鸟教程都没有Grid的文档，这两个地方有：阮一峰，MDN。时间有限，我也没有做过多了解
响应式布局的开发原理
参考 pink老师视频
- 响应式开发就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的
- 响应式开发的核心就是媒体查询，而媒体查询用的最多的还是浏览器尺寸查询
- bootstrap是响应式的鼻祖
- bootstrap3的设备尺寸划分
设备划分 尺寸区间 超小屏幕(手机) (0px，768px) 小屏设备(平板) [768px，992px) 中等设备(桌面显示器) [992px，1200px) 宽屏设备(大桌面显示器) [1200px，···) - bootstrap4的设备尺寸划分
设备划分 尺寸区间 超小屏幕(手机) (0px，576px) 小屏设备(平板) [576px，768px) 中等设备(桌面显示器) [768px，992px) 宽屏设备(大桌面显示器) [992px，1200px) 超大屏设备 (1200px，···)
前端面试题整理汇总(一) 优才网 关于前端面试题,优优之前推荐过,如下,点击即可查看: 5个经典的前端面试问题 2016年十家知名公司前端面试经验总结 前端面试会问哪些问题? 前端开发面试题汇总[HT ... 很多新人在开始做移动端UI设计的时候,往往对界面的一些尺寸规范不是十分清楚,很多时候都是凭借自己的感觉和经验去绘制界面,心里并没有一个清晰的概念,导致做出来的页面总是不那么尽如人意.本文整理汇总了一些 ... 写在前面 很多新人在开始做移动端UI设计的时候,往往对界面的一些尺寸规范不是十分清楚,很多时候都是凭借自己的感觉和经验去绘制界面,心里并没有一个清晰的概念,导致做出来的页面总是不那么尽如人意.本文整理 ... 写在前面 很多新人在开始做移动端UI设计的时候,往往对界面的一些尺寸规范不是十分清楚,很多时候都是凭借自己的感觉和经验去绘制界面,心里并没有一个清晰的概念,导致做出来的页面总是不那么尽如人意.本文整理 ... 2019独角兽企业重金招聘Python工程师标准>>> 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候, ... 前端基础知识整理汇总(上) HTML页面的生命周期 HTML页面的生命周期有以下三个重要事件: 1.DOMContentLoaded -- 浏览器已经完全加载了 HTML,DOM 树已经构建完毕,但是 ... 不管是应届毕业生还是职场中人,在找工作时都必然会对待遇十分关注,而通常都是面试到最后几轮才知道公司给出的待遇.如果我们事先就了解大概行情,那么就会在面试之前进行比较,筛选出几个心仪的公司,这样才能集中 ... 链接地址:https://segmentfault.com/a/1190000021776077 (相关下载资源) 本文收集了树莓派使用过程中经常需要用到的资源,主要包括树莓派系统镜像.树莓派硬件介绍 ... 本文收集了树莓派使用过程中经常需要用到的资源,主要包括树莓派系统镜像.树莓派硬件介绍.树莓派GPIO引脚编号.树莓派电路原理图下载.树莓派应用.树莓派工具等等,非常值得收藏. 一.快速上手 树莓派快速 ...页面布局整理汇总，让你彻底搞明白多种布局的关系相关推荐
最新文章
热门文章