什么是响应式布局

响应式布局是指：页面的设计与开发应当根据用户行为和设备环境进行相应的响应和调整，是一种网页设计的技术做法，该布局可以使网站在多种浏览设备上阅读和导航，同时减少缩放，平移和滚动。

响应式布局的实现

使用 viewport meta 标签控制布局网页宽度默认等于屏幕宽度，原始缩放比例为1.0，即网页初始大小占屏幕面积的100%

<meta ame="viewport" content="width=device-width, initial-scale=1" />

viewport 是网页的默认宽度和高度。

流动布局是指各个区块的位置都是浮动的，不是固定不变的

.left{width:40%,float:left}
.right{width:60%,float:right}

如果宽度放不下两个元素，后面的元素自动滚动到前面元素的下方，不会在水平方面溢出，避免出现滚动条。

当屏幕小于500px时，left取消浮动

@media screen and (max-device-width:500px)
{
    .left{float:none;}
}

响应式布局不要使用绝对的宽度，字体大小，字体不要用绝对大小“px”。