https://index.zshipu.com/geek001/tags/has/ Recent content in :Has() on 知识铺的博客 Hugo -- gohugo.io zh-CN Wed, 02 Sep 2026 00:00:00 +0000 https://index.zshipu.com/geek001/post/20260902/Media-Query-%E5%A4%B1%E6%95%88%E6%97%B6Container-Query-%E4%B8%8E-has-%E5%A6%82%E4%BD%95%E6%8B%AF%E6%95%91%E7%BB%84%E4%BB%B6%E5%93%8D%E5%BA%94%E5%BC%8F/ Wed, 02 Sep 2026 00:00:00 +0000 https://index.zshipu.com/geek001/post/20260902/Media-Query-%E5%A4%B1%E6%95%88%E6%97%B6Container-Query-%E4%B8%8E-has-%E5%A6%82%E4%BD%95%E6%8B%AF%E6%95%91%E7%BB%84%E4%BB%B6%E5%93%8D%E5%BA%94%E5%BC%8F/ media query 失效了：屏幕宽度 1200px 时，侧边栏卡片却因父容器太窄而溢出。 Container query 直接针对组件所在容器尺寸生效，:has() 则让父元素能根据子元素是否存在来切换样式，这些新特性把响应式从视口层下沉到组件层。 Container query 把响应式从视口下沉到组件容器 传统响应式完全依赖视口宽度。开发者写下 @media (min-width: 768px) 后，样式只看浏览器