响应式布局
响应式布局是一种网页设计方法，使网页能够根据用户设备的屏幕尺寸、分辨率、方向（横屏/竖屏）等特性自动调整布局和内容，提供一致且优化的用户体验。其核心目标是“一次设计，多端适配”。
实现响应式布局核心技术：
- 布局方式：
- 弹性盒子
- 网格布局
- 百分比布局
- 单位可以借助vw实现
- 断点设置：
- 根据常见的设备宽度设置断点
- 手机 < 768px
- 平板 768px ~ 1024px
- PC > 1024px
- 根据不同的设备宽度显示不同的布局样式
断点设置
断点设置的实现方法，有两种方式：1.媒体查询 或 2.第三方框架BootStrap
媒体查询是CSS3的一个强大功能，它允许开发者根据设备的特定特性（如屏幕的宽度、高度、方向、分辨率等）来应用不同的CSS样式。
@media 媒体类型 and (媒体特征){/* 样式 */
}
- @media：媒体查询的起始声明
- 设备类型：媒体类型（可选），如screen、print等，省略默认 all
- 媒体特征：如min-width、max-width等
html {font-size: 200px; // 正常字体大小
}// 当屏幕小于等于320px时，html文字大小修改17.066667px
@media screen and (max-width: 320px){html{font-size: 17.066667px;}
}// 当屏幕大于等于540x，html文字大小修改28.8px
@media screen and (min-width: 540px){html{font-size: 28.8px;}
}