移动端常见布局总结（一）——流式布局（百分比布局）

流式布局

• 流式布局，也就是百分比布局。
• 它实际通过将盒子的宽度设置为百分比来根据屏幕的宽度进行伸缩，不收固定像素的限制，内容向两侧填充。
• 要使宽度在合理范围内进行伸缩，故有以下两个属性进行操作

1. max-width：最大宽度，（max-hight）一般为 640px 和 750px
2. min-width：最小宽度，（min-hight）一般为 320px 和 350px

案例：京东移动端首页

1.1 准备工作

1. 建立相关文件
   
2. 设置视口标签以及引入初始化样式

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0">
	<!-- 引入css初始化文件 -->
    <link rel="stylesheet" href="css/normalize.css">
    <!-- 引入css样式文件 -->
    <link rel="stylesheet" href="css/index.css">

1.2 body样式

body {
    width: 100%;
    /* body的宽度与浏览器保持一致*/
    margin: 0 auto;
    /* 页面最大宽度是640px，如果在比较大的手机上显示，显示不完全，居中显示 */
    min-width: 320px;
    /* 目前市面上最小手机分辨率为320 */
    max-width: 640px;
    /*经过测量*/
    background: #fff;
    font-size: 14px;
    font-family: -apple-system, Helvetica, sans-serif;
    line-height: 1.5;
    color: #666;
}

总结：
流式布局使用时 必须先给body写宽度100%，给其他盒子写 xx%。
高度没有办法确定，所以只能固定高度。

1.3 头部app

HTML代码：

<div class="app">
    <div class="close"></div>
    <div class="logo">
        <h1>
            <a href="#">
            京东
            <img src="images/logo.png" alt="">
        </a>
        </h1>
    </div>
    <div class="des">
        <em>打开京东APP</em>
        <em> 购物实惠又轻松</em>
    </div>
    <div class="btn">
        <a href="#">立即打开</a>
    </div>
</div>

CSS样式代码：

.app {
    height: 50px;
}
/*
	以下是使用流式布局百分比来进行布局，一行宽度分别使用8%、10%、57%、25% 进行分配。
*/
.app div {
    float: left;
    height: 50px;
    background-color: #333;
}

.app .close {
    width: 8%;
}
.app .logo {
    width: 10%;
}
.app .des {
    width: 57%;
}
.app .btn {
    width: 25%;
    background-color: #CD2525;
}