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

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

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


对于Web开发者来说,我们可以像下面这样来使用:

// 有缝折叠
@media (spanning: single-fold-vertical) {
// CSS Code...
}
// 无缝折叠
@media (screen-fold-posture: laptop){
// CSS Code...
}
// 折叠角度查询
@media (max-screen-fold-angle: 120deg) {
// CSS Code...
}
// 视口数量查询
@media (horizontal-viewport-segments: 2) {
// CSS Code...
}
@media (vertical-viewport-segments: 2) {
// CSS Code...
}


在现代布局中,将这些媒体查询特性、CSS环境变量和CSS Grid布局结合在一起,就可以很轻易的满足外形响应的需求变化。比如:

:root {
--sidebar-width: 5rem;
}
@media (spanning: single-fold-vertical) {
:root {
--sidebar-width: env(viewport-segment-left 0 0);
}
}
main { display: grid;
grid-template-columns: var(--sidebar-width) 1fr;
}

Stephanie 在她的最新博文《Building Web Layouts For Dual-Screen And Foldable Devices》(地址: https://www.smashingmagazine.com/2022/03/building-web-layouts-dual-screen-foldable-devices/)中也向大家提供了一个示例,演示了按屏幕数量(horizontal-viewport-segments: 2)查询的示例(地址: https://www.stephaniestimac.com/demos/smashing-ds-demo/):

.recipe {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: minmax(175px, max-content);
grid-gap: 1rem;
  }
.recipe-meta {
grid-column: 1 / 4;
  }
img {
grid-column: 1 / 4; 14  }
.recipe-details__ingredients {
grid-row: 3;
  }
.recipe-details__preparation {
grid-column: 2 / 4;
grid-row: 3;
  }
@media (horizontal-viewport-segments: 2) {
.recipe {
grid-template-columns: env(viewport-segment-width 0 0) 1fr 1fr;
grid-template-rows: repeat(2, 175px) minmax(175px, max-content); 29 }
30
.recipe-meta {
grid-column: 1 / 2;
  }
img {
grid-column: 2 / 4;
grid-row: 1 / 3;
  }
.recipe-details__ingredients {
grid-row: 2;
42  }

 

 

43

 

44

 

.recipe-details__preparation {

45

 

grid-column: 2 / 4;

46

 

grid-row: 3;

47

 

}

48

 

 

49

}

 

 

 

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

相关文章
|
9天前
|
移动开发 开发者 HTML5
构建响应式Web界面:Flexbox与Grid的实战应用
【10月更文挑战第22天】随着互联网的普及,用户对Web界面的要求越来越高,不仅需要美观,还要具备良好的响应性和兼容性。为了满足这些需求,Web开发者需要掌握一些高级的布局技术。Flexbox和Grid是现代Web布局的两大法宝,它们分别由CSS3和HTML5引入,能够帮助开发者构建出更加灵活和易于维护的响应式Web界面。本文将深入探讨Flexbox和Grid的实战应用,并通过具体实例来展示它们在构建响应式Web界面中的强大能力。
24 3
|
2天前
|
SQL 负载均衡 安全
安全至上:Web应用防火墙技术深度剖析与实战
【10月更文挑战第29天】在数字化时代,Web应用防火墙(WAF)成为保护Web应用免受攻击的关键技术。本文深入解析WAF的工作原理和核心组件,如Envoy和Coraza,并提供实战指南,涵盖动态加载规则、集成威胁情报、高可用性配置等内容,帮助开发者和安全专家构建更安全的Web环境。
9 1
|
5天前
|
负载均衡 监控 算法
论负载均衡技术在Web系统中的应用
【11月更文挑战第4天】在当今高并发的互联网环境中,负载均衡技术已经成为提升Web系统性能不可或缺的一环。通过有效地将请求分发到多个服务器上,负载均衡不仅能够提高系统的响应速度和处理能力,还能增强系统的可扩展性和稳定性。本文将结合我参与的一个实际软件项目,从项目概述、负载均衡算法原理以及实际应用三个方面,深入探讨负载均衡技术在Web系统中的应用。
29 2
|
20天前
|
前端开发 开发者 容器
构建响应式Web界面:Flexbox与Grid布局的深度解析
【10月更文挑战第11天】本文深入解析了CSS3中的Flexbox和Grid布局,探讨了它们的特点、应用场景及使用方法。Flexbox适用于一维布局,如导航栏;Grid布局则适用于二维布局,如复杂网格。通过示例代码和核心属性介绍,帮助开发者灵活构建响应式Web界面。
36 5
|
16天前
|
人工智能 前端开发
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
|
17天前
|
存储 安全 数据库
后端技术在现代Web开发中的实践与创新
【10月更文挑战第13天】 本文将深入探讨后端技术在现代Web开发中的重要性,通过实际案例分析展示如何利用先进的后端技术提升用户体验和系统性能。我们将从基础架构设计、数据库优化、安全性保障等方面展开讨论,为读者提供清晰的指导和实用的技巧。无论是新手开发者还是经验丰富的技术人员,都能从中获得启发和帮助。
29 2
|
18天前
|
机器学习/深度学习 移动开发 JavaScript
Web实时通信的学习之旅:SSE(Server-Sent Events)的技术详解及简单示例演示
Web实时通信的学习之旅:SSE(Server-Sent Events)的技术详解及简单示例演示
96 0
|
20天前
|
自然语言处理 Cloud Native 数据安全/隐私保护
后端技术在现代Web开发中的实践与创新
本文探讨了后端技术在现代Web开发中的重要性及其应用。通过分析当前流行的后端框架和开发模式,揭示了如何利用这些技术来构建高效、可扩展的Web应用程序。同时,文章也讨论了未来后端技术的发展趋势,为开发者提供了一些启示。
|
22天前
|
前端开发 JavaScript 开发者
Web组件:一种新的前端开发范式
【10月更文挑战第9天】Web组件:一种新的前端开发范式
25 2
|
22天前
|
JavaScript 前端开发 网络架构
如何使用Vue.js构建响应式Web应用
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用