如何使用MediaQuery计算宽高？容器固定高度60的响应式实现

要让固定高度为60的Container具备响应式效果，核心思路是基于基准设备的尺寸，通过MediaQuery获取当前设备的屏幕参数，计算缩放比例，动态调整容器高度，确保在不同屏幕尺寸下视觉大小一致。

实现步骤 #

1. 确定基准设备尺寸：先选一个基准设备（比如常见的iPhone 11，屏幕高度812逻辑像素），你的60高度就是基于这个设备的视觉高度。
2. 获取当前设备的屏幕参数：通过MediaQuery.of(context)获取当前设备的屏幕高度或宽度。
3. 计算缩放比例：用当前设备的对应参数除以基准设备的参数，得到缩放系数。
4. 动态设置容器高度：用基准高度（60）乘以缩放系数，得到响应式高度。

代码示例 #

假设我们以屏幕高度作为适配基准：

Container(
  // 基于基准设备高度（812）计算响应式高度
  height: 60 * (MediaQuery.of(context).size.height / 812),
  color: Colors.blue, // 方便查看视觉效果
)

如果觉得基于宽度适配更合理（避免平板等宽屏设备上容器过高），可以换成屏幕宽度：

// 基准设备宽度取375（iPhone 11的宽度）
Container(
  height: 60 * (MediaQuery.of(context).size.width / 375),
  color: Colors.blue,
)

额外优化：封装工具方法 #

如果多处需要用到响应式尺寸，可以封装一个工具函数，避免重复代码：

double getResponsiveSize(BuildContext context, double baseSize) {
  // 这里用宽度作为基准，你也可以换成高度
  final baseWidth = 375;
  return baseSize * (MediaQuery.of(context).size.width / baseWidth);
}

// 使用方式
Container(
  height: getResponsiveSize(context, 60),
)

原理说明 #

MediaQuery提供了当前设备的屏幕尺寸、像素密度等信息，通过基准尺寸和当前尺寸的比例，能保证元素在不同设备上的视觉占比一致，实现真正的响应式效果，避免固定数值导致大屏或小屏上视觉大小失调。

内容的提问来源于stack exchange，提问作者user8759167