响应式布局 - 技术栈

响应式布局

不爱编程的小方2025-09-12 15:12

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

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

布局方式：

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

断点设置：

根据常见的设备宽度设置断点
手机 < 768px
平板 768px ~ 1024px
PC > 1024px
根据不同的设备宽度显示不同的布局样式

断点设置

断点设置的实现方法，有两种方式：1.媒体查询或 2.第三方框架BootStrap

媒体查询是CSS3的一个强大功能，它允许开发者根据设备的特定特性（如屏幕的宽度、高度、方向、分辨率等）来应用不同的CSS样式。

javascript 复制代码

@media 媒体类型 and (媒体特征){
	/* 样式 */
}

@media：媒体查询的起始声明
设备类型：媒体类型（可选），如screen、print等，省略默认 all
媒体特征：如min-width、max-width等

javascript 复制代码

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;
	}
}