流式布局
- 流式布局,也就是百分比布局。
- 它实际通过将盒子的宽度设置为百分比来根据屏幕的宽度进行伸缩,不收固定像素的限制,内容向两侧填充。
- 要使宽度在合理范围内进行伸缩,故有以下两个属性进行操作
- max-width:最大宽度,(max-hight)一般为 640px 和 750px
- min-width:最小宽度,(min-hight)一般为 320px 和 350px
案例:京东移动端首页
1.1 准备工作
- 建立相关文件
- 设置视口标签以及引入初始化样式
<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;
}