响应式媒体查询生成器

媒体查询代码

/* 开发策略：mobile-first（基础样式默认适配小屏移动端）
   目标屏幕：viewport 宽度 375px 的移动设备
   样式特性：布局调整（Grid）、字体缩放、图片优化（视网膜图像切换） */

/* ========== 基础（小屏默认） ========== */
/* 字体与间距：保证在更小屏幕仍可读可点 */
:root {
  --container-padding: 12px;
  --gap: 12px;
}

html {
  /* 基础字号（更小屏下保持清晰） */
  font-size: 14px;
}

body {
  margin: 0;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%; /* iOS 字体缩放一致性 */
}

/* 布局容器与栅格（单列） */
.container {
  max-width: 100%;
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.grid-responsive {
  display: grid;
  grid-template-columns: 1fr; /* 小屏单列 */
  gap: var(--gap);
}

/* 图片优化：保证比例与容器自适应 */
img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

.media-cover {
  width: 100%;
  aspect-ratio: 4 / 3;    /* 现代浏览器均已支持 */
  object-fit: cover;      /* 裁切填充避免变形 */
  background-color: #f2f2f2;
}

/* 背景图（默认 1x） */
.hero {
  background-image: url("hero@1x.jpg"); /* 占位示例，替换为实际路径 */
  background-size: cover;
  background-position: center;
}

/* 视网膜资源切换（2x） */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
  .hero {
    background-image: url("hero@2x.jpg");
  }
}

/* 更高密度（3x） */
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi), (min-resolution: 3dppx) {
  .hero {
    background-image: url("hero@3x.jpg");
  }
}

/* ========== 精确适配：viewport 宽度 375px ========== */
/* 说明：使用 (width: 375px) 精确命中该宽度（常见 iPhone 竖屏 viewport） */
@media (width: 375px) {
  :root {
    --container-padding: 16px; /* 375px 下边距更舒适 */
    --gap: 12px;               /* 控制卡片/模块间距 */
  }

  /* 字体轻微放大以提高可读性（在 375px 宽度下） */
  html {
    font-size: 15px; /* 相比基础增加 1px，避免拥挤 */
  }

  /* 布局调整：在 375px 下切换到双列商品/内容网格 */
  .grid-responsive {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap);
  }

  /* 示例：标题与价格等可微调字号（相对 html 的 rem 放大） */
  .title-sm {
    font-size: 1rem;     /* 约 15px */
    font-weight: 600;
  }
  .text-muted {
    font-size: 0.875rem; /* 约 13.125px */
    color: #666;
  }
}

/* ========== 附加：极小屏兜底（<375px） ========== */
/* 说明：可选。确保在更小屏时依然可用，维持单列与紧凑间距 */
@media (max-width: 374.98px) {
  :root {
    --container-padding: 12px;
    --gap: 10px;
  }
  html {
    font-size: 14px;
  }
  .grid-responsive {
    grid-template-columns: 1fr;
  }
}

参数说明

• 断点范围：
  • 精确宽度：@media (width: 375px)
  • 像素密度：2dppx 与 3dppx（同时提供 -webkit-min-device-pixel-ratio 与 dpi 等价写法，覆盖旧版 WebKit）
  • 兜底小屏：@media (max-width: 374.98px)（可选）
• 适用设备：移动端，viewport 宽度为 375 CSS 像素的设备；高像素密度屏使用 2x/3x 图。
• 兼容性：
  • 媒体特性 width、resolution 为标准特性，现代浏览器均支持。
  • 像素密度切换同时提供 (-webkit-min-device-pixel-ratio) 与 dpi/dppx，覆盖旧版 WebKit。
  • object-fit、aspect-ratio 在现代浏览器有良好支持；如需兼容非常老旧浏览器，可用固定高度占位方案作为回退。

使用建议

• 代码集成方式：
  • 采用移动端优先，先加载基础样式，再加载本媒体查询代码，确保层叠顺序正确。
  • 将图片路径 hero@1x/2x/3x.jpg 替换为实际资源；建议保持同尺寸不同分辨率资源以便像素密度切换。
• 注意事项：
  • (width: 375px) 为精确命中，适用于专门优化该宽度；若需覆盖更多相近机型，建议改用范围写法，例如 (min-width: 360px) and (max-width: 414px)。
  • 字体采用 rem 单位，随 html 字号在 375px 下整体放大，避免逐项维护。
  • 背景图用于装饰类媒体；内容图片仍应在 HTML 使用 并结合 srcset/sizes 获取更佳加载效果。
• 扩展可能性：
  • 可新增更大断点（如 414px、480px、768px）以覆盖大屏手机与平板。
  • 可为横屏添加 orientation 媒体查询以微调网格与字号。
  • 可按组件维度增加更细粒度的网格规则（如商品卡片最小宽度阈值），提升布局稳定性。