关于css:响应式布局方案

首先看看几种典型的响应式布局计划：

1. 传统布局，px做单位
2. 绝对单位布局
3. 通过媒体查问实现响应式布局
4. 基于rem的flexible布局
5. flex\grid
6. 借助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有了计算的能力