CSS 折叠显示 Polyfill | CSS-Tricks

可折叠手机开始成为一种趋势。当然，还处于早期阶段，但一些产品已经开始发货，并且他们肯定在手机上安装了网络浏览器。不用说，作为网页设计师，我们会想知道折叠的位置，以便我们可以设计适合上半部分和下半部分的屏幕……或者左半部分和右半部分¹。

看起来它将以 env() 常量的形式提供给我们，就像所有那些刘海东西一样。

@media (spanning: single-fold-vertical) {
  body {
    flex-direction: row;
  }
  .map {
    flex: 1 1 env(fold-left)
  }
  .locations-list {
    flex: 1;
  }
}

我也认为它可以是……

@media (spanning: single-fold-vertical) {
  .page-wrap {
    display: grid;
    grid-template-columns: env(fold-left) 1fr;
  }
}

有趣的是，没有 fold-right，不是吗？我们不是试图避免使用像这样的方向术语，而是使用逻辑属性吗？为什么不是 fold-inline-start？

看看这句话如何随着时间推移。只要看看第一款真正流行的可折叠手机将会有三个部分。

Colin Reci

# 2020 年 4 月 9 日

很棒的文章，Chris。我在疫情开始之前就在商店里看到了某种 Galaxy 可折叠手机。我很好奇他们的网格是如何工作的。谢谢分享！

Alexis Menard

# 2020 年 4 月 9 日

这是一个早期草案；我们正在寻求反馈。事实上，有很多事情正在讨论，例如：https://github.com/w3c/csswg-drafts/issues/4736。

https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/236 还会解决你的“fold-right”评论。

关于逻辑属性，目前它只是名称，背后的实际概念不会改变。让我们看看 CSSWG 讨论中会产生什么来更新命名。

Zouhir

# 2020 年 4 月 9 日

感谢您发起这次讨论，我是规范的合著者，听到 Web 开发人员和专家的反馈对我们帮助很大！以下是规范的一些更新以及我对主题的一些其他想法（抱歉重复了一些 Alexis 在下面提到的内容）

1- 关于 fold-right 和 fold-bottom：我们在解释器文档中添加了这些，这是我提交的 GH 问题的链接，其中包含关于如何使用其他 rect 属性来提高 RTL 写入模式的人体工程学示例。

/* before introducing fold-right*/
[dir="rtl"] .col-1 {
   flex: 0 0 calc( 100vw - ( env(fold-left) + env(fold-width) ) );
}


/* after introducing fold-right */
[dir="rtl"] .col-1 {
   flex: 0 0 env(fold-right);
}

2- 当您使用 3 个屏幕设备（2 个折叠）时，env(fold-*) 指的是哪个折叠？我们现在正在考虑解决这一不可避免的问题的方案。一些可以帮助开发人员“选择”第 1 个、第 2 个等环境变量来获取折叠、刘海等列表中特定项目的价值观的东西。还没有具体的提案。希望很快就会有。

3- 关于使用逻辑属性用于折叠 env() 变量的一些想法：使用物理屏幕矩形来表示某些硬件配置（铰链、刘海等）的几何形状非常普遍，这也与我们在 JavaScript API 方面提供的 DOMRects 一致。尽管我必须说，如果这样做可以为开发人员提供更多的人体工程学和控制，我个人并不反对提出逻辑性的。我一直在思考的一件事是：想象一下，我们必须支持视口跨越 6 个桌面外部显示器（3 列，2 行）的情况，哪种变量样式可以帮助你更好地理解“间隙”的位置和几何形状？

此评论线程已关闭。如果你有重要信息要分享，请联系我们。