流式布局

流式布局，即百分比布局，也称非固定像素布局

特点是，不直接设置盒子宽高，而是设置盒子在页面中占据的百分比，来拉伸盒子，使盒子随着页面宽度的改变自适应宽高

开发初始流程

一 搭建文件结构

二 设置视口标签，引入初始化样式

<!--设置视口标签-->
<meta name="viewport" content="width=device-width, user-scalable=no, 
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!--引入初始化css-->
 <link rel="stylesheet" href="css/normalize.css">
<!--引入项目css-->
 <link rel="stylesheet" href="css/index.css">

三 常用初始化样式

body {
margin: 0 auto;
min-width: 320px;
max-width: 640px;
background: #fff;
font-size: 14px;
font-family: -apple-system, Helvetica, sans-serif;
line-height: 1.5;
color: #666;
}

四 二倍精灵图

• 要先在切图工具内将精灵图等比缩放
• 根据缩放后的大小测量移动距离
• 代码里要先缩放后移动