你也许不再需要使用 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. Python +selenium 自动化之元素定位

    selenium之八大元素定位: 1.通过ID的方式定位  id是页面的唯一标识 例如:找到百度的搜索输入框 driver.findElement(By.id("kw")) 2.通 ...

  2. tomcat Filter内存马

    idea调试的时候加入源代码 <dependency> <groupId>org.apache.tomcat</groupId> <artifactId> ...

  3. prometheus描点原理

    大家好,我是蓝胖子,关于prometheus的入门教程有很多,拿我之前学prometheus的经历来讲,看了很多教程,还是会对prometheus的描点以及背后的统计原理感到迷惑,所以今天我们就来分析 ...

  4. vue报错解决Duplicate keys detected: ‘[object Object]’

    最近在做vue项目时遇到了报错 ​ Duplicate keys detected: '[object Object]'. This may cause an update error. ​ 由于这个 ...

  5. Federated Learning001

    联邦学习--笔记001 2022.11.16周三 今天学习了联邦学习的开山之作---Communication-Efficient Learning of Deep Networks from Dec ...

  6. ip2location.py

    import re import geoip2.database from tabulate import tabulate from matplotlib import pyplot as plt ...

  7. 自用 .net C# List集合和DataTable互转，可自定义表头

    using System; using System.Collections.Generic; using System.Data; using System.Linq; using System.R ...

  8. CVE-2020-0796 SMB远程代码执行漏洞复现

    前言: 这个windows的永恒之黑漏洞,不得不复现一下啦! 这个漏洞诸多大佬都已经复现了,现在跟随大佬的脚步,逐个复现一下: 可参考:https://www.adminxe.com/1220.htm ...

  9. vivo 场景下的 H5无障碍适配实践

    作者:vivo 互联网前端团队- Zhang Li.Dai Wenkuan 随着信息无障碍的建设越来越受重视,开发人员在无障碍适配中也遇到了越来越多的挑战.本文是笔者在vivo开发H5项目做无障碍适配 ...

  10. 记录一次AutoMapper注册报错

    通常,.Net5我们注册服务是这样的. //添加AutoMapper var automapperConfog = new MapperConfiguration(config => { con ...