移动端常见布局
单独制作移动端页面(主流)
流式布局(百分比布局)
流式布局就是百分比布局,也称为固定像素布局,通过盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩,不受固定像素的限制,内容向两侧填充,流式布局是移动web开发使用的比较常见的布局方式
为了保证流式布局的合理性通常会对盒子的最大宽度与最小宽度进行限制
max-width min-width
max-height min-height
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
width: 100%;
max-width: 1080px;
min-width: 720px;
margin: 0 auto;
}
div {
float: left;
width: 50%;
height: 400px;
}
section div:nth-child(1) {
background-color: skyblue;
}
section div:nth-child(2) {
background-color: blue;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
</section>
</body>
</html>
flex弹性布局(强烈推荐)此布局内容太多已新开文章发布过了
采用flex布局的元素,称为flex容器,容器内的所有元素自动成为容器成员,成为flex项目
less+rem+媒体查询布局
混合布局
响应式页面兼容移动端(其次)此布局已拆分文章发布
媒体查询
bootstrap