带你读《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
