如何根据div宽度控制元素可见性？CSS实现方案咨询

当然可以实现！现在CSS的**容器查询（Container Queries）**特性正好能解决你的痛点——它允许我们基于父容器的尺寸而非浏览器视口来应用样式，完美适配你开发组件/Widgets的需求。

实现步骤： #

1. 给容器设置查询上下文
   首先需要给你的.container元素添加容器查询的标识，让浏览器知道这个元素是我们要监听尺寸的容器：

   .container {
     width: 100%;
     /* 声明容器为内联尺寸查询的上下文（横向排版下对应宽度） */
     container-type: inline-size;
     /* 可选：给容器起个名字，复杂场景下能精准定位查询目标 */
     container-name: widget-container;
   }
   

   如果需要同时监听容器的宽高，可以把inline-size换成size，不过你的场景用inline-size就足够了。

2. 编写容器查询规则
   接下来使用@container规则定义不同容器尺寸下的元素显示逻辑：

   /* 默认状态：先隐藏两个切换元素，避免初始加载时的闪烁 */
   .mobile-only, .desktop-only {
     display: none;
   }
   
   /* 容器宽度小于400px时，显示移动端元素，隐藏桌面端元素 */
   @container (max-width: 399px) {
     .mobile-only {
       display: block;
     }
   }
   
   /* 容器宽度大于等于400px时，显示桌面端元素，隐藏移动端元素 */
   @container (min-width: 400px) {
     .desktop-only {
       display: block;
     }
   }
   

3. 更新HTML结构
   给需要切换显示的元素加上对应的类名即可：

   <div class="container" style="width:100%">
     <div class="mobile-only">宽度小于400px时显示的元素</div>
     <div class="desktop-only">宽度大于400px时显示的元素</div>
     <div>其他div元素</div>
   </div>
   

额外补充： #

• 兼容性：目前Chrome、Firefox、Safari 16.4+以及Edge都已经支持容器查询，对于现代Web应用来说完全够用。
• 灵活拓展：如果你的组件需要适配更多尺寸断点，只需要添加对应的@container规则即可，比如@container (min-width: 600px)来适配更大的容器场景。
• 容器要求：容器需要有明确的尺寸计算逻辑，比如设置了width、inline-size，或是弹性布局/网格布局中的子元素，你的.container已经设置了width:100%，完全符合要求。

内容的提问来源于stack exchange，提问作者PiotrP