共计 850 个字符，预计需要花费 3 分钟才能阅读完成。
首先看看几种典型的响应式布局计划：
- 传统布局，px 做单位
- 绝对单位布局
- 通过媒体查问实现响应式布局
- 基于 rem 的 flexible 布局
- flex\grid
- 借助 javaScript 进行布局
要实现灵便的响应式布局，尤其是在挪动端适应不同屏幕，咱们须要抉择整体款式侵入性较小、实现简略的布局计划。个别采纳绝对单位布局，上面简略理解一下绝对布局，怎么应用，绝对于谁
（1）em
em 是绝对于以后元素或者以后元素继承来的字体的宽度。em 并不是总是绝对于父元素的字体大小，在理论中，“绝对于谁”取决于利用于什么 CSS 属性。如 line-height 属性中，em 是绝对于本身的字体大小。
（2）rem
绝对于根节点 html 元素的字体大小。淘宝和网易的自适应布局计划都是以 rem 为外围的，然而他们都有所不同。网易计划中，包含字体 font-size 在内的属性，都是以 rem 为单位，淘宝计划中，会在 body 元素上加上默认 12px 的字体大小。
（3）vw
vw 是绝对于视口宽度，100vw 等于一个视口宽度，vh 与 vw 同理，100vh 等于一个视口高度。
（4）%
% 的绝对对象比较复杂，在不同的属性中，其对象都不一样。如：position:absolute 中，元素的 left\top 等采纳 % 做单位，这里的 % 是绝对于参照物的，如 left 是绝对于父元素的宽，top 是绝对于父元素的搞 position: relative 中，元素在有本人原本的地位的同时，还能够用 left\top 等采纳 % 做单位示意绝对于本身原本地位的便宜，left 绝对于本身的宽，top 绝对于本身的高 position: fixed 中，毫无疑问，元素的 left\top 等采纳 % 做单位，是绝对于整个视口的 margin\padding 中，% 是绝对于父元素的宽 border-radius 中，% 绝对于本身宽高 background-size 中，% 绝对于本身宽高 font-size 中，% 绝对于父元素的字体大小 line-height 中，% 绝对于本身字体大小
（5）calc
响应式布局计算单位，使得 CSS 有了计算的能力