带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计: 组件驱动式Web设计(23)

简介: 带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计: 组件驱动式Web设计(23)

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


image.png媒体查询 vs. 容器查询

通过上面的示例的介绍,我想你对容器查询特性已经有了一个较清晰的认识了。从使用角度来看,容器查询和媒体查询是非常的相似,那么有人可能会问,有了容器查询是不是就不再需要媒体查询特性了呢?在回答这个问题之前,我们简单的来看两者的差异。

 

众所周知,媒体查询查询的浏览器视窗宽度(当然还有其他查询特性),而容器查询查询的是组件其父容器(具有包含性上下文的祖先元素)的宽度(或样式)。下图可能可以清晰的阐述两者的差异:

image.png

 

 

 

color: #666;
line-height: 1.4;
padding: 0 20px; display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; overflow: hidden;
}
.card__button { display: inline-flex;
justify-content: center; align-items: center; border: none;
border-radius: 10rem; background-color: #feca53; padding: 10px 20px;
color: #000;
text-decoration: none;
box-shadow: 0 3px 8px rgb(0 0 0 / 7%); transition: all 0.2s linear;
font-weight: 700; justify-self: end; margin: 0 20px 20px 0; cursor: pointer;
}
.card__button:hover { background-color: #ff9800;
}

 

正如上面的效果所示,卡片组件可以随着其容器(.card__container)宽度自动变化,在窄屏下效果看上去还不错,但在宽屏下,效果看上去有点怪怪的。不过不用担心,这仅是最初的效果。我们期望的是通过容器查询的特性,在容器不同断点下改变卡片组件的布局。按照前面所介绍的,我们需要先创建一个包含性上下文,即在 .card__container 上使用 container 显式声明该元素是一个包容性上下文。

.card__container {
container: inline-size;
}

 

 

 

效果如下:

image.png

Untitled @airen CodePen

(地址:https://codepen.io/airen/pen/MWrXNGM

(地址:https://codepen.io/airen

(地址:https://codepen.io/

 

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

相关文章
|
3天前
|
资源调度 JavaScript 前端开发
IM跨平台技术学习(十一):环信基于Electron打包Web IM桌面端的技术实践
这次借着论证 Web IM端 SDK 是否可以在 Electron 生成的桌面端正常稳定使用,我决定把官方新推出的 webim-vue3-demo,打包到桌面端,并记录了这次验证的过程以及所遇到的问题和解决方法。
13 2
|
4天前
|
SQL 安全 数据库
如何构建一个安全的Web应用:技术与策略的全面指南
【6月更文挑战第12天】构建安全Web应用的全面指南:了解SQL注入、XSS等威胁,采用输入验证、安全编程语言,配置安全服务器和数据库,使用HTTPS,实施会话管理、访问控制,正确处理错误和日志,定期进行安全审计和漏洞扫描。确保用户数据和应用安全。
|
5天前
|
编解码 前端开发 JavaScript
响应式Web设计:适应所有屏幕的艺术与科学
【6月更文挑战第11天】响应式Web设计是适应各种屏幕尺寸和分辨率的网站设计方法,利用CSS3媒体查询、流动布局、弹性图片和JavaScript等技术实现。其原则包括灵活性、可用性和可访问性。最佳实践包括优先考虑移动设备体验、简化布局、优化资源、多设备测试和遵循Web可访问性标准。随着设备多样化,响应式设计成为现代Web设计的关键趋势。
|
7天前
|
缓存 前端开发 数据库
构建高性能Web应用的关键技术
本文将介绍构建高性能Web应用所需的关键技术。我们将探讨前端、后端、数据库等多个方面的技术,并提供实用的建议,帮助开发者优化应用性能并提升用户体验。
|
14天前
|
前端开发 JavaScript 开发者
Web技术标准是如何定义网页的?
【6月更文挑战第2天】Web技术标准是如何定义网页的?
30 2
|
14天前
|
JavaScript 前端开发 开发者
Web技术标准
【6月更文挑战第2天】Web技术标准
16 4
|
15天前
|
XML 网络协议 Java
XML Web 服务技术解析:WSDL 与 SOAP 原理、应用案例一览
XML Web服务是基于WSDL、SOAP、RDF和RSS等标准的网络应用程序组件技术。WSDL描述服务接口和消息格式,SOAP用于结构化信息交换,RDF描述网络资源,RSS则用于发布网站更新。Web服务特点是自包含、自描述,基于开放协议,可重用且能连接现有软件。WSDL文档包含`types`、`message`、`portType`和`binding`元素,定义服务操作和协议。SOAP协议规定消息格式,通过HTTP等传输。
476 1
|
16天前
|
前端开发 JavaScript Java
Java语言在Web前端开发中的技术应用
Java语言在Web前端开发中的技术应用
|
19天前
|
SQL 缓存 监控
基于Java的Web应用性能优化技术
基于Java的Web应用性能优化技术
27 3
|
22天前
|
开发框架 前端开发 .NET
web技术
【5月更文挑战第25天】web技术
25 2