技术栈
container queries
DsirNg
16 天前
css
·
前端工程化
·
组件化
·
响应式布局
·
css grid
·
设计系统
·
container queries
断点不该认识设备：组件布局的容器状态治理
响应式布局长期把“屏幕有多大”当作主要输入：@media 读取视口宽度，页面在某个断点切换列数、导航形态和卡片排版。这种方式在页面结构简单时足够有效；但当同一个卡片可能出现在主栏、侧栏、弹窗、分栏工作台或可拖拽面板中时，视口宽度就不再能准确描述它的真实处境。
DsirNg
21 天前
css
·
flexbox
·
grid
·
前端架构
·
响应式布局
·
设计系统
·
container queries
响应式的真正输入：为组件重新定义可用空间
一个商品卡放在主内容区时是横向图文结构；放进侧栏后，文字挤压、操作按钮换行；放进弹窗的双栏区域后，它又可能因为页面视口足够宽而继续套用“大屏样式”。
我是有底线的