带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（4）https://developer.aliyun.com/article/1340893?groupCode=taobaotech
作为Web设计师，你已经使用了多个版本的布局来展示同一个组件三种不同状态下的UI变化。可以说把足够多的信息传递给了Web开发者！到这一步，Web 设计师已给 Web 开发者提供了具有响应式的Web设计稿。
接下来，再从另一种角色（Web开发者）来看响应式Web设计的现状。对于 Web 开发者而言，要实现上图中三种状态下的卡片UI效果非常简单。借助 CSS 媒体查询特性，在不同断点下调整CSS样式规则即可：
/* Mobile First */ .card { display: flex; flex-wrap: wrap; gap: 10px; } /* Tablet */ @media (min-width: 700px) { .card { gap: 20px } } /* Laptop and Desktop */ @media (min-width: 1024px) { .card { position: relative } .card__thumb { position: absolute; inset: 0; } }
这种方式只能适合于同一组件独立存在于不同版本下。就示例的设计稿来看，在桌面端有两种效果的卡片，为了满足该设计效果，我们需要额外添加一些类名，在不同状态下为卡片处理不同的UI效果：
CSS样式代码可能会是像下面这样：
/* Mobile First */ .card { display: flex; flex-wrap: wrap; gap: 10px; } /* Tablet */ @media (min-width: 700px) { .card--vertical { gap: 20px } } /* Laptop and Desktop */ @media (min-width: 1024px) { .card--featured { position: relative } .card--featured .card__thumb { position: absolute; inset: 0; } }
带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（6）https://developer.aliyun.com/article/1340891?groupCode=taobaotech
