响应式布局

响应式布局是一种网页设计方法，使网页能够根据用户设备的屏幕尺寸、分辨率、方向（横屏/竖屏）等特性自动调整布局和内容，提供一致且优化的用户体验。其核心目标是"一次设计，多端适配"。

实现响应式布局核心技术：

1. 布局方式：

• 弹性盒子
• 网格布局
• 百分比布局
• 单位可以借助vw实现

2. 断点设置：

• 根据常见的设备宽度设置断点
• 手机 < 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;
	}
}