响应式布局-白红宇

1. css3的响应式布局单位：

vw 和 wh

vw和vh是视口（viewport units）单位，何谓视口，就是根据你浏览器窗口的大小的单位，不受显示器分辨率的影响，是不是很神奇，这就代表了，我们不需要顾虑到现在那么多不同电脑有关分辨率的自适应问题。

vw是可视窗口的宽度单位，和百分比有点一样，1vw = 可视窗口的宽度的百分之一。比如窗口宽度大小是1800px，那么1vw = 18px。和百分比不一样的是，vw始终相对于可视窗口的宽度，而百分比和其父元素的宽度有关。

vh就是可视窗口的高度了。

这边顺便提一下vmin和vmax，vmin是指选择vw和vh中最小的那个，而vmax是选择最大的那个。

使用vw和vh实现垂直居中    .box {        width: 50vw;        height: 50wh;        margin: 25vh auto;  // 上下边距为25vh，左右边距为自适应（居中）        background-color: aquamarine;    }只要设置margin的上下间距，使之heigit + margin-top +margin-bottom = 100 ，width + margin-left + margin-right = 100 ，就能够响应垂直居中复制代码

em是相对长度单位。相对于当前对象内本文的字体尺寸（如果没有设置本文尺寸，那就是相对于浏览器默认的字体尺寸，也就是16px），这样计算的话。如果没有设置字体尺寸就是1em = 16px。如果使用em的话，有个好的建议，就是将body的font-size设置成62.5%，也就是16px * 62.5% = 10px。这样的话1em = 10px，方便我们计算。

rem

rem和em一样也是相对长度单位，但是不一样的是rem始终都是相对html根元素。这样有个很大的有点就是使用rem后不会受到对象内文本字体尺寸的影响，而且只需要改变根元素就能改变所有的字体大小。兼容性也是不错的，IE8以上版本和其他浏览器都已经支持，是个做响应式页面的好选择。

2. padding-bottom（设置高度基于宽度的自适应）

3. flex布局

1、以下属性定义在box中

.box{  display: flex;}行内元素：.box{  display: inline-flex;}// 注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。flex-direction（决定items的排列方向）.box {  flex-direction: row | row-reverse | column | column-reverse;}flex-wrap  // 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。.box{  flex-wrap: nowrap | wrap | wrap-reverse;}nowrap（默认）：不换行wrap：换行，第一行在上方。wrap-reverse：换行，第一行在下方。flex-flow  // flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap.box {  flex-flow: 
    
      || 
     
      ;}justify-content // 定义了项目在主轴上的对齐方式。.box {  justify-content: flex-start | flex-end | center | space-between | space-around;}align-items // 定义项目在交叉轴上如何对齐。.box {  align-items: flex-start | flex-end | center | baseline | stretch;}复制代码

以下属性定义在items上

order // 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。.item {  order: 
    
     ;}flex-grow  // 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。.item {  flex-grow: 
     
      ; /* default 0 */}flex-shrink // 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。flex-basisflexalign-self复制代码

grid