你也许不再需要使用 CSS Media Queries（媒体查询）了
你也许不再需要使用 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（媒体查询）了的更多相关文章
- CSS media queries 媒体查询
最近在做一些页面打印时的特殊处理接触到了media queries,想系统学习一下,在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错,结合自己的使用总结一下. CSS2/me ...
- media queries 媒体查询使用
media queries 翻译过来就是媒体查询,media 指的媒体类型.那么有哪些类型呢,常用的有 screen(屏幕).打印(print),个人理解就是它所在的不同终端. 常用的用法:1,< ...
- Media Queries 媒体查询
1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于 ...
- css3之Media Queries 媒体查询
一.初步了解 Media Queries是CSS3新增加的一个模块功能,其最大的特点就是通过css3来查询媒体,然后调用对应的样式. 了解Media Queries之前需要了解媒体类型以及媒体特性: ...
- Media Queries媒体查询
Media Queries能在不同的条件下使用不同的样式,使页面在不同在终端设备下达到不同的页面效果.Media Queries有其自己的使用规则.一个媒体查询由一个可选的媒体类型和媒体特性表达式,使 ...
- Media Queries 媒体查询常见设备断点
按需调整断点 一.谷歌后摘抄的一部分媒体查询 /*#region SmartPhones */ /* SmartPhones */@media only screen and (min-device- ...
- 移动设备上的媒体查询 CSS media queries for mobile device
CSS的媒体查询虽然在传统的互联网页面可能发挥的余地不是很大,但是自从苹果和安卓的风靡之后,移动平台上的web开发变得越来越流行了,同时CSS的媒体查询可谓派上了大用场了. 以下为翻译内容,原文来自这 ...
- [CSS3] CSS Media Queries
Using CSS media queries allows you to design responsive layout in your web apps and website. We will ...
- css:Media Queries: How to target desktop, tablet and mobile?
<!doctype html> <html> <head> <meta name="viewport" content="wid ...
- CSS基础教程 -- 媒体查询屏幕适配
响应式布局 Media Query 的使用方法 在上例中, 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更 ...
随机推荐
- 从头学Java17-Modules模块
模块Modules 了解module系统如何塑造 JDK,如何使用,使项目更易于维护. 烧哥注 从头讲JDK17的文章比较少,英文为主,老外虽能讲清原理,但写的比较绕,所以决定翻译一下,也有个别细节完 ...
- 第一次用vs编译器进行第一次编程所遇问题
首先这款编译器具有多种语言:C#.C++.Java.Python等,这对像我一样的编程小白十分友好. 然后就是我第一天编程遇到的问题: 1."printf"未被定义 int a = ...
- 高效运营新纪元：智能化华为云Astro低代码重塑组装式交付
摘要:程序员不再需要盲目编码,填补单调乏味的任务空白,他们可以专注于设计和创新:企业不必困惑于复杂的开发过程,可以更好地满足客户需求以及业务策略迭代. 本文分享自华为云社区<高效运营新纪元:智能 ...
- 利用Aspose.Word对Word文件添加印章处理以及实现业务数据的替换处理
有时候,我们在处理大量文档的时候,需要批量给Word文档添加印章处理,方便打印操作,本篇随笔介绍利用Aspose.Word对Word文件添加印章处理以及实现业务数据的替换处理. 1.利用Aspose. ...
- 2023年icpc大学生程序设计竞赛-wmh
这次比赛名额比较少,程老师还是给了我们新生更多机会,非常感谢.第一次去这么远打比赛,也算是比较开心的,过去那天晚上就被队友拉着出去玩,玩的很嗨,打的很菜.vp去年题的时候是自信的,参加今年正式赛的时候 ...
- mysql：EXPLAIN
推荐阅读原文:EXPLAIN用法和结果分析 语法:EXPLAIN SELECT * FROM t1 使用EXPLAIN关键字可以模拟优化器执行SQL查询语句,从而知道MySQL是如何处理你的SQL语句 ...
- CentOS7系统初始化个人配置
以下内容为个人最小化安装后的配置步骤 更换yum源为阿里云 yum install -y epel-release lrzsz wget yum-axelget mv /etc/yum.repos.d ...
- CutLER：一种用于无监督目标检测和实例分割的方法
本文分享自华为云社区<CutLER:一种用于无监督目标检测和实例分割的方法>,作者:Hint. 目标检测是计算机视觉中的一种重要任务,使AI系统感知.推理.理解目标.训练定位模型需要特别的 ...
- 文心一言 VS 讯飞星火 VS chatgpt （78）-- 算法导论7.4 2题
二.如果用go语言,证明:在最好情况下,快速排序的运行时间为 Ω(nlgn). 文心一言: 在最好情况下,快速排序的运行时间为Ω(nlgn)的证明如下: 快速排序是一种分治算法,它将一个数组分成两个子 ...
- 在 Visual Studio 2022 中使用文件对比
在最新版本的 Visual Studio 2022 中,加入了新的功能特性--"文件对比". 在开发过程中,开发人员有时会需要比对文件差异,特别是代码文件,之前很多时候是借助版本控 ...