我发现响应式布局有一个挺有意思的问题，就是浏览器宽度没变，组件能用的空间却变了 例如一个 SaaS 数据卡片，在全宽页面展示得好好的 同样的卡片放进侧边栏后… · @yunxi0623 · TwKit

@yunxi0623

我发现响应式布局有一个挺有意思的问题，就是浏览器宽度没变，组件能用的空间却变了 例如一个 SaaS 数据卡片，在全宽页面展示得好好的 同样的卡片放进侧边栏后文字开始换行，按钮挤在一起 传统 CSS Media Query 主要根据视口宽度判断 但现在的问题不是整个浏览器有多宽，而是卡片所在的容器有多宽 这正是 CSS Container Queries 适合处理的场景 可以先给卡片的父容器设置： container-type: inline-size; 再通过 @container 为子元素定义不同宽度下的样式 这样卡片不需要知道自己放在首页、弹窗还是侧边栏，只需要根据可用空间调整布局 对可复用组件来说，这比不断增加页面级特殊样式更自然

曝光 34 · 评论 0 · 点赞 0 · 书签 0