Designing for Dual Screen and Foldable Devices with CSS (2023)
6 days ago
- 两个CSS媒体查询针对可折叠设备：horizontal-viewport-segments用于并排屏幕，vertical-viewport-segments用于堆叠屏幕。
- 环境变量如env(viewport-segment-width)和env(viewport-segment-height)提供每个显示分段的几何信息，从而在屏幕间实现响应式布局。
- 这些变量可以与CSS Grid一起使用，创建跨越两个显示器的多列布局，如一个配方演示所示。
- 双屏模式不是强制性的，但如果数据显示客户使用可折叠设备，这可能是有益的；也是一种脱颖而出的方式。
- 2023年可折叠设备出货量预测超过2100万台，表明市场正在增长。
- 当前浏览器支持仅限于Microsoft Edge稳定版；Chrome需要启用实验性网络平台标志才能测试。
- 可折叠领域创新时机成熟，但缺乏完整的浏览器和操作系统支持，这阻碍了广泛采用。