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

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

超越 Media Queries 的功能

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

<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 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 将成为前端开发的标配。

你也许不再需要使用 CSS Media Queries（媒体查询）了的更多相关文章

  1. CSS media queries 媒体查询

    最近在做一些页面打印时的特殊处理接触到了media queries,想系统学习一下,在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错,结合自己的使用总结一下. CSS2/me ...

  2. media queries 媒体查询使用

    media queries 翻译过来就是媒体查询,media 指的媒体类型.那么有哪些类型呢,常用的有 screen(屏幕).打印(print),个人理解就是它所在的不同终端. 常用的用法:1,< ...

  3. Media Queries 媒体查询

    1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于 ...

  4. css3之Media Queries 媒体查询

    一.初步了解 Media Queries是CSS3新增加的一个模块功能,其最大的特点就是通过css3来查询媒体,然后调用对应的样式. 了解Media Queries之前需要了解媒体类型以及媒体特性: ...

  5. Media Queries媒体查询

    Media Queries能在不同的条件下使用不同的样式,使页面在不同在终端设备下达到不同的页面效果.Media Queries有其自己的使用规则.一个媒体查询由一个可选的媒体类型和媒体特性表达式,使 ...

  6. Media Queries 媒体查询常见设备断点

    按需调整断点 一.谷歌后摘抄的一部分媒体查询 /*#region SmartPhones */ /* SmartPhones */@media only screen and (min-device- ...

  7. 移动设备上的媒体查询 CSS media queries for mobile device

    CSS的媒体查询虽然在传统的互联网页面可能发挥的余地不是很大,但是自从苹果和安卓的风靡之后,移动平台上的web开发变得越来越流行了,同时CSS的媒体查询可谓派上了大用场了. 以下为翻译内容,原文来自这 ...

  8. [CSS3] CSS Media Queries

    Using CSS media queries allows you to design responsive layout in your web apps and website. We will ...

  9. css:Media Queries: How to target desktop, tablet and mobile?

    <!doctype html> <html> <head> <meta name="viewport" content="wid ...

  10. CSS基础教程 -- 媒体查询屏幕适配

    响应式布局 Media Query 的使用方法 在上例中, 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更 ...

随机推荐

  1. php发起支付加密数据供获取订单状态使用

    <?php//作者主页: https://www.bz80.comnamespace Index\Controller; class PayController extends BaseCont ...

  2. 「Python实用秘技15」pandas中基于范围条件进行表连接

    本文完整示例代码及文件已上传至我的Github仓库https://github.com/CNFeffery/PythonPracticalSkills 这是我的系列文章「Python实用秘技」的第15 ...

  3. Redis缓存同步1-策略介绍

    缓存数据同步策略示意图 在大多数情况下,我们通过浏览器查询到的数据都是缓存数据,如果缓存数据与数据库的数据存在较大差异的话,可能会产生比较严重的后果的.所以,我们应该也必须保证数据库数据.缓存数据的一 ...

  4. hexo博客yilia主题_缺失模块_解决方案

    hexo博客yilia主题,左侧栏目有一个全部文章的按钮,刚开始开始报错缺失模块,如下图: 我解决了这个问题着实不容易饶了弯路,但是跟着提示步骤,其实很简单,走起: 1.查看node版本 win键+R ...

  5. Spring Cloud 之OpenFeign

    Spring Cloud 之OpenFeign 一:简介 ​ Feign是一个声明式(对比RestTemplate编程式)的服务客户端,即通过@FeignClient注解即可声明一个接口(interf ...

  6. Django: You are trying to add a non-nullable field 'name' to mainnav without a default; we can't do that (the database needs something to populate existing rows).

    错误原因: 语句中缺少默认值 class Main(models.Model): img = models.CharField(max_length=255) name = models.CharFi ...

  7. [k8s]使用nfs挂载pod的应用日志文件

    前言 某些特殊场景下应用日志无法通过elk.grafana等工具直接查看,需要将日志文件挂载出来再处理.本文以nfs作为远程存储,统一存放pod日志. 系统版本:CentOS 7 x86-64 宿主机 ...

  8. [python]格式化字符串的几种方式

    目录 方式一:C风格%操作符 方式二:内置的format函数与str类的format方法 方式三:插值格式字符串 python中有以下几种方法可以格式化字符串 方式一:C风格%操作符 这种方法偏C语言 ...

  9. Jenkins用户管理（二）：不同用户分配不同的任务访问权限

    需求:不同用户访问到不同的Jenkins任务. 依赖插件:Role-based Authorization Strategy 1. 插件安装 进入[系统管理]-[插件管理]-[可用插件],搜索Role ...

  10. 在编写API接口的技术文章时应注意的内容

    编写API接口的技术文章时,建议包含以下内容: 1. 简介:介绍API接口的目的和作用,以及所属的项目或服务. 2. 接口描述:详细描述API接口的功能和使用方法,包括输入参数.输出结果和可能的错误码 ...