你也许不再需要使用 CSS Media Queries(媒体查询)了

你也许不再需要使用 CSS Media Queries(媒体查询)了

最近,CSS 引入了一项新功能:Container Queries。它可以替代 Media Queries 并实现 Media Queries 无法胜任的任务。

超越 Media Queries 的功能

让我们想象一个场景:在网页上有两列卡片。我们希望在卡片宽度较窄时,卡片内部呈上下布局;而在卡片宽度较宽时,卡片内部呈左右布局。以 Tailwind CSS 为例,可以这样实现:

html 复制代码
<html>
  <body class="...">
    <main class="container mx-auto flex flex-wrap">

      <div class="basis-1/2 p-2 @container/card">
        <div class="... flex gap-1 flex-col @sm/card:flex-row">
          <img class="... w-full @sm/card:w-32" src="..." alt="">
          <p>Lorem ...</p>
        </div>
      </div>

      <div class="basis-1/2 p-2 @container/card">
        ...
      </div>

      <div class="basis-1/2 p-2 @container/card">
        ...
      </div>

      <div class="basis-1/2 p-2 @container/card">
        ...
      </div>

    </main>
  </body>
</html>

你可以在 Tailwind CSS Container Queries (https://github.com/tailwindlabs/tailwindcss-container-queries) 上找到更多相关信息。

效果如下:

替代 Media Queries

考虑下一个场景:网页上有一个标题栏,我们希望在窄屏时背景色为深红色,在宽屏时为浅红色。以 Tailwind CSS 为例,可以这样实现:

html 复制代码
<html class="@container/root">
  <body class="...">
    <h1 class="bg-red-500 @md/root:bg-red-300">
      Header
    </h1>
  </body>
</html>

效果如下:

总结

Container Queries 的引入为我们提供了更灵活的布局和样式控制方式,可以减少对传统的 CSS Media Queries 的需求。这一新特性的使用可以极大地简化响应式设计,为开发者带来更多的便利。在不远的将来,Container Queries 将成为前端开发的标配。

相关推荐
孤水寒月2 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
呆呆的心11 小时前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css
AA-代码批发V哥12 小时前
CSS之布局详解指南
css
拾光拾趣录15 小时前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
FogLetter15 小时前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css
FogLetter15 小时前
前端性能优化:深入理解回流与重绘
前端·css
浪裡遊17 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
拾光拾趣录18 小时前
CSS全面指南:从基础布局到高级技巧与实践
前端·css
Codebee19 小时前
OneCode图生代码技术深度解析:从可视化设计到注解驱动实现的全链路架构
css·人工智能·算法
zhanshuo19 小时前
i18next + 原生JS 双引擎:打造前端多语言系统最佳实践
前端·javascript·css