你也许不再需要使用 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可以更 ...
随机推荐
- python打包exe总结 pyinstaller py2exe
Python打包exe 有很多可以用的 如 pyinstaller py2exe cx_Freeze nuitka py2app py0xidizer 其中cx_Freeze没用过 nuitka是把p ...
- 软件设计 day1
Software Design Methodology 软件设计方法学 中国石油大学(华东)2022-2023-3 国际周课程 Advanced software design 张晓东老师邀请在日本广 ...
- ASP.NET MVC4 学习笔记-4
添加验证--Adding Validation 现在我们要为程序增加数据验证.如果不增加数据验证的话,我们的用户可能会输入错误的数据或者提交一个空白的表格. 在MVC应用程序中,数据验证通常要在域模型 ...
- ASP.NET 6 使用工作单元操作 MongoDB
大家好,我是Edison. 最近工作中需要用到MongoDB的事务操作,因此参考了一些资料封装了一个小的组件,提供基础的CRUD Repository基类 和 UnitOfWork工作单元模式.今天, ...
- Spring-Bean（三）
Bean生命周期配置 init-method:指定类中的初始化方法名称 destory-method:指定类中销毁方法名称 Bean标签配置 <bean id="UserDao&quo ...
- 彻底搞懂Vue针对数组和双向绑定(MVVM)的处理方式
欢迎关注我的博客:https://github.com/wangweianger/myblog Vue内部实现了一组观察数组的变异方法,例如:push(),pop(),shift()等. Object ...
- 深入理解Java虚拟机（JVM）：原理、结构与性能优化
1. 介绍 Java虚拟机(JVM)是Java程序的核心执行引擎,负责将Java源代码编译成可执行的字节码,并在运行时负责解释执行字节码或将其编译成本地机器代码.本文将深入探讨JVM的原理.结构以及性 ...
- 解码Transformer：自注意力机制与编解码器机制详述与代码实现
本文全面探讨了Transformer及其衍生模型,深入分析了自注意力机制.编码器和解码器结构,并列举了其编码实现加深理解,最后列出基于Transformer的各类模型如BERT.GPT等.文章旨在深入 ...
- next.js 源码解析 - getStaticProps、getStaticPaths 篇
好久前写了关于 getStaticProps 和 getStaticPaths 的内容,然而半年过去了源码解析就一直忘记了,不久前有人提醒才想起来,补下坑. 本文主要是解读下 getStaticPro ...
- Android RIL&IMS源码分析
一.需求 1.了解IMS相关知识体系 2.RILD 与 RILJ.IMS回调消息的机制 二.相关概念 2.1 IMS IMS全称是IP Multimedia Subsystem,中文意义为IP多媒体子 ...