一、流式布局(百分比布局)介绍
流式布局,就是百分比布局,也称非固定像素布局。通过将盒子的宽度设置成百分比,从而根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。流式布局方式是移动web开发使用的比较常见的布局方式。<!--* @Author: 田根旺* @Date: -12-24 11:11:30* @LastEditTime: -12-24 11:29:53* @LastEditors: Please set LastEditors* @Description: 移动端布局—流式布局* @FilePath: \web\demo24.html--><!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,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><title>移动端布局—流式布局</title><style>body {min-width: 320px;max-width: 980px;}section {width: 100%;height: 100px;background-color: pink;}section div {float: left;width: 50%;height: 100px;background-color: skyblue;border: 10px solid #ff0;box-sizing: border-box;}</style></head><body><section><div class="box1">1</div><div class="box2">2</div></section></body></html>
二、注意事项
制作过程中,需要定义页面的最大和最小支持宽度。
max-width最大宽度(max-height 最大高度)
min-width最小宽度(min-height最小高度)