怎样使用CSS Container Queries实现组件响应式-css教程-PHP中文网

container-type 必须显式设在包裹容器上，不能加在或flex/grid子项上；是替换元素无法稳定测宽，flex/grid直接子项尺寸由父级动态分配，需额外包裹一层并设min-width:0或width:fit-content。

怎样使用css container queries实现组件响应式

container-type 必须显式设在包裹容器上，不能加在

<table> 或 Flex/Grid 子项上
<p>直接给 <code><table> 元素加 <code>container-type: inline-size

是无效的——

<table> 是替换元素，浏览器无法稳定测量其宽度。同理，Flex 或 Grid 的直接子项（比如 <code>.card

）也不能直接设 container-type，因为它的尺寸由父级布局算法动态分配，没有可测量的“自身宽度”。

正确做法是额外包一层 <div class="wrapper">，并把 <code>container-type 加在这层上：

<div class="grid">
  <div class="wrapper" style="container-type: inline-size;">
    <div class="card"></div>
  </div>
</div>

如果这个 .wrapper 是 Flex/Grid 子项，必须加 min-width: 0 或 width: fit-content，否则会被 flex 布局强制撑满，导致宽度不可测
避免用 display: contents 或 display: none 的父元素当容器——它们没有渲染盒，尺寸恒为 0
gap 不计入 inline-size 计算，但 padding 和 border 会计入；建议统一用 box-sizing: border-box 预估可用宽度

@container 规则里只能用 `min-width`、`max-width` 等带单位的条件

@container (width: 400px) 或 @container (width > 600px) 都是无效语法，整条规则会被浏览器忽略。Container Queries 只支持四种基础条件：min-width、max-width、min-height、max-height，且单位不可省略（px 最稳妥，em/rem 不被支持）。

复制别人代码时漏掉 min- 前缀是最常见翻车点
不支持 and 多条件组合（如 (min-width: 400px) and (max-width: 800px)），当前应拆成两条独立规则
范围写法 @container (300px 虽然部分浏览器支持，但兼容性尚不稳定，生产环境建议回避

表格组件响应式要靠 CSS 主动控制，不是 @container 自动完成

@container 只负责触发样式切换，它不会让 <th> 自动换行、也不会隐藏列。真正的响应行为必须由你写的 CSS 显式定义，比如改 <code>display、切布局模式、或用 grid 重构结构。

小容器下把表格转为卡片列表：@container (max-width: 480px) { .table-wrapper { display: grid; } .table-row { display: contents; } .table-cell { display: flex; flex-direction: column; } }
大容器恢复表格形态时，注意重置 display 值，否则可能残留 contents 导致内容丢失
不要指望 @container 替你做逻辑判断——它只是开关，开合之后怎么变，全靠你手写

Tailwind 用户必须装 `@tailwindcss/container-queries` 插件

原生 CSS 写 @container 没问题，但工程中用 Tailwind 的话，得单独引入插件，否则 container 相关类名（如 [@media](https://developer.mozilla.org/zh-CN/) 前缀）根本不会生成。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

安装命令：npm install -D @tailwindcss/container-queries
配置需在 tailwind.config.js 的 plugins 数组里显式引入：require('@tailwindcss/container-queries')
插件语法对齐标准，不是模拟方案，支持 container-size、container-min-w 等实用工具类

真正容易被忽略的是：container-type 不声明就完全没效果，而 @container 规则一旦写错语法，浏览器会静默忽略——既不报错，也不生效，调试时得先盯死这两处。