一、流式布局简介
流式布局 又称为 百分比布局 / 非固定像素布局 ;
为 流式布局 中 盒子模型 设置 百分比宽度 , 其大小可以根据屏幕宽度自适应伸缩 , 该盒子没有像素限制 , 内容自动向左右两边填充 ;
流式布局 可以 根据 设备屏幕尺寸 和 设备类型 自动调整 网页布局 和 标签元素大小 , 以适应不同尺寸的 设备屏幕 ;
当 设备屏幕尺寸 发生变化时 , 标签元素的尺寸也会相应地调整 ;
移动端流式布局注意事项 :
使用 Flex 弹性盒模型 或 Grid 网格布局 : 使用这些布局技术可以更轻松地实现复杂的布局结构。设置最大和最小宽度 : 在设置元素宽度时，需要考虑最小和最大宽度，以确保元素在不同设备上都能够正常显示。 最小宽度 : min-width ;最大宽度 : max-width ;代码语言：javascript复制 max-width: 980px;
min-width: 320px;使用响应式图片 : 在移动端流式布局中，图片大小也需要自适应调整。可以使用响应式图片，通过设置不同的图片尺寸和分辨率来实现。使用媒体查询 : 使用媒体查询可以 根据不同的屏幕尺寸和设备类型，设置不同的CSS样式。测试不同设备的显示效果 : 在完成布局之后，需要 在不同的设备上测试显示效果，以确保布局在不同设备上都能正常显示。二、流式布局代码示例代码示例 :
代码语言：javascript复制
显示效果 :