移动布局之流式布局

Posted 2021-02-19 zcy9838

流式布局（百分比布局）：

• 流式布局，也就是百分比布局，也称非固定像素布局
• 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充
• 流式布局方式是移动web开发使用的比较常见的布局方式
• max-width 最大宽度（max-height 最大高度）
• min-width 最小宽度 （min-height 最小宽度）

流式布局宽度设置为百分比的形式，但是我们做的是单独的移动端页面，宽度不需要像PC端那么宽，因此可以通过设置最大宽度和最小宽度值。

body {
    width: 100%;
    max-width: 640px;
    min-width: 320px;
    /* 使内容水平居中 */
    margin: auto;
}