停止与媒体查询的斗争！使用 CSS 容器查询代替-css教程-PHP中文网

停止与媒体查询的斗争！使用 CSS 容器查询代替

DDD

发布： 2024-11-21 09:16:11

原创

1043 人浏览过

Stop Fighting with Media Queries! Use CSS Container Queries Instead

曾经构建过一个在主要内容中看起来很完美但在侧边栏中出现问题的组件吗？？

媒体查询只能解决一半的问题 - 它们关心屏幕大小，而不是组件实际所在的位置。这就是容器查询的用武之地。

媒体查询出了什么问题？

假设您已经构建了此卡片组件：

@media (min-width: 768px) {
  .card {
    display: flex;
    gap: 2rem;
  }
}

登录后复制

在移动设备和桌面设备上看起来都很棒！直到...您的队友将其放入狭窄的侧边栏中。现在你的“桌面”布局正试图挤进 300 像素的空间。哎哟。

想要提高您的 CSS 技能吗？查看“取代我的 JavaScript 的现代 CSS 技术”，了解纯 CSS 如何取代复杂的 JavaScript 代码。

容器查询：更好的方法

容器查询不是问“屏幕有多宽？”，而是问“我的容器有多宽？”它们的工作原理如下：

/* Step 1: Mark the container */
.card-wrapper {
  container-type: inline-size;
}

/* Step 2: Style based on container width */
@container (min-width: 400px) {
  .card {
    display: flex;
    gap: 2rem;
  }
}

登录后复制

现在您的卡片会适应其容器，而不是屏幕。把它放在任何地方 - 它就可以工作！

真实示例：智能产品卡

这是一张适合任何空间的产品卡：

<div>





<pre class="brush:php;toolbar:false">.product-wrapper {
  container-type: inline-size;
}

/* Mobile-first: Stack everything */
.product {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Medium container: Side-by-side layout */
@container (min-width: 400px) {
  .product {
    grid-template-columns: 200px 1fr;
  }
}

/* Large container: More sophisticated layout */
@container (min-width: 600px) {
  .product .content {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  .product .desc {
    grid-column: 1 / -1;
  }
}

登录后复制

浏览器支持吗？

好消息！容器查询适用于所有现代浏览器。对于较旧的浏览器，您的移动布局将成为后备：

/* Default mobile layout */
.product { display: grid; }

/* Enhance for modern browsers */
@supports (container-type: inline-size) {
  /* Container query styles */
}

登录后复制