带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计：组件驱动式Web设计（19）-阿里云开发者社区

带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计：组件驱动式Web设计（19）

2023-09-30 46

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计：组件驱动式Web设计（19）

带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计：组件驱动式Web设计（18）https://developer.aliyun.com/article/1340877?groupCode=taobaotech

比如，容器宽度（.card__container）分别在 >400px、>550px 和 >700px 时为.card设置不同样式：

代码可能像下面这样：

/* Default */
.card {
// ...
}
/* CSS Container Queries*/
.card__container {
}
/* container's width > 400px*/ @container size(width > 400px) {
.card {
// ...
}
}
/* container's width > 550px*/ @container size(width > 550px) {
.card {
// ...
}
}
/* container's width > 700px*/ @container size(width > 700px) {
.card {
// ...
}
}