1.单独制作移动端页面
- 流式布局(百分比布局)
- fiex弹布局
- les+rem+ 媒体查询布局
- 混合布局
2.响应式 页面兼容移动端
- 媒体查询
- bootstarp
1.1 单独制作移动端页面布局之 流式布局(百分比布局)
- 流式布局,就是百分比布局,也称非固定像素布局
- 通过盒子的宽度设置百分比 来根据屏幕的宽度进行伸缩 不受固定像素的限制 内容像两侧填充
- 流式布局方式 是移动web使用比较常见的布局方式
- max-width 最大宽度 设置最大放大宽度 超过参数就不在放大
- min-width 最小宽度 设置最小缩小参数 小过参数不在缩小
下面展示下代码 随着宽度一起伸缩
<style>
*{
/* 清除内外边距 */
margin: 0;
padding: 0;
}
div{
/* 一直在居中显示 */
margin: 0 auto;
width: 100%;
/* 设置最大宽度 超过980px 就不能再放大 */
max-width: 980px;
/* 设置最小宽度 最小不小于320px */
min-width: 320px;
}
div span{
float: left;
display: block;
width: 50%;
height: 200px;
}
div span:nth-child(1){
background-color: hotpink;
}
div span:nth-child(2){
background-color:skyblue;
}
</style>
</head>
<body>
<div>
<span>2</span>
<span>1</span>
</div>