响应式与自适应

响应式布局

基于媒体查询，实现不同屏幕分辨率的终端上展示不同的网页。
设置 Meta 标签

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

媒体查询

@media screen and (min-width: 最小px) and (max-width: 最大px) {
    css
}

这里的样式就会覆盖上面已经定义好的样式，通过多次宽度设置，实现不同宽度时使用不同的css。

自适应布局

根据屏幕的分辨率，网页内容自动伸缩，不改变主体的内容和布局。

尺寸

百分比
百分比是相对父对象的，浏览器尺寸的改变，就是根节点html的长宽改变，可以用%来将浏览器尺寸和元素尺寸联系起来，做到自适应。
auto
auto是很多尺寸值的默认值，也就是由浏览器自动计算。首先是块级元素水平方向的auto，块级元素的margin、border、padding以及content宽度之和等于父元素width。使用auto属性在父元素宽度变化的时候，该元素的宽度也会随之变化。

布局

1.浮动布局
2.绝对定位布局
3.弹性盒子