随着三星 Galaxy Fold 和华为 Mate X 的发布，前端同学将面临一个新的任务：折叠屏的适配。折叠屏虽距离普及可能还有很长一段路，大多数公司还未将折叠屏列入适配的范围，但是提前研究下折叠屏的适配还是极好的。

折叠屏手机概况

华为Mate X

技术参数：(  由于手机还未正式上市，这里数据可能有出入 )

三星Galaxy Fold

技术参数：

柔派-FlexPai

小厂手机，没啥知名度，资料较少

微软 Surfaceduo

最近新出，实际是双屏手机，暂无详细资料

从目前推出的这几款折叠手机可以看出：折叠手机从折叠到展开，屏幕的变化类似于 iphone 到 ipad。

折叠屏适配的本质

当老板下令说：“我们的产品要适配折叠屏”，不同的人会有不同的反应：

产品和设计

• 如何更好的利用空间？

• 如何展示才不会使页面显得空洞？

• 展开和折叠时分别怎么展示？

• 展开后如何过渡？

• ……

开发同学

• 页面是否显示正常？

• 是否按产品和设计的预期显示？

• ……

因此对于我们开发同学来说，对折叠屏的适配首先要确定一个预期，即要先确定好交互和设计，才能评估工作。因此“折叠屏的适配先是一个设计问题，然后才是一个适配问题”。

目前情况下，产品和设计可能还不会考虑适配折叠屏的问题，那是否表示开发同学暂时无事可做呢？不尽然。

从以上折叠屏手机的情况来看，折叠屏手机的适配其实就是一个响应式设计的问题，而响应式设计有一个比较公认9条的基本原则，折叠屏手机的适配至少要满足这9项基本原则。

响应式设计9项基本原则

1.响应式设计 vs 适应性设计

响应式:响应式是流布局，它会自动适应屏幕大小，不管是什么设备。尺寸按比例设置，自动随浏览器尺寸变化而变化；简单只有一套代码；

适应式：自适应则采取多个不同的布局设计，多个屏幕的尺寸，使用哪个布局取决于屏幕类型。自适应作品用屏幕尺寸来决定用哪套布局。复杂，要根据市面上设备区分；

这两种设计方式彼此相辅相成，所以说也没有对错之分。具体情况要依内容而定。

2.内容流

随着屏幕尺寸越来越小，内容所占的垂直空间也越来越多，也就是说，内容会向下方延伸，这就叫做内容流。

这点对前端指导意义是：对于内容不固定情况，高度不要固定写死，写死高度就要考虑溢出情况，文本溢出、图片按比例缩放。

3.相对单位

为了适应不同屏幕尺寸和不同使用场景，使用绝对单位容易出现问题 。常见的相对单位有em、rem、ch、ex、vw、vh、vmax、vmin。

4.断点

断点可以看做是临界点，比如屏幕宽度小于这个宽度时显示一个样式，大于这个宽度时显示另一样式。常见的断点落地方案就是媒体查询，如：

@media (min-width:800px) and (max-width:1800px)

5.最大和最小值

有时候内容占满整个屏幕宽度（例如在移动设备上）是好事，但如果相同的内容在电视屏幕上也撑得满满的，就不太合理了。因为强行铺满，根据前面的内容流原则，可能会导致页面显示异常的大。这就是为什么要有最大/最小值。例如，如果宽度为 100%，最大宽度 1000px，那么内容就会以不超过 1000px 的宽度填充屏幕。

注意：Max-width和min-widht要设置合理，不能太大也不能太小。

如京东首页和优酷首页就遵循了这个原则：

6.嵌套对象

这是一种化零为整的思想，当多个元素位置是相对的时候，对每个元素采取响应式布局处理或许比较麻烦，这时候可以将这些元素用一个元素包裹起来，这样实现会更加明了和整洁。

7.移动优先还是台式桌面优先

这表示适配的起点，是先按手机做然后适配台式机？还是先按台式机做然后适配手机？

使用哪种根据实际情况决定，无所谓好坏，对于折叠屏适配来说肯定是手机优先。

8.web字体vs系统字体

想让自己的网站拥有炫酷的 Futura 或 Didot 效果吗？那就是用 web 字体吧。尽管 web 字体看起来很炫酷，但你要记住，这些字体都需要用户下载，字越多，用户加载页面的时间也就越长。另一方面，系统字体加载速度则快得多（前提是用户本机就有），但太过普通。

9.位图vs矢量图

你的图标是否有很多细节，并且应用了很多华丽的效果？如果是，那就用位图。如果不是，考虑使用矢量图。如果是位图，使用 jpg、png 或 gif。矢量图则最好使用SVG或图标字体。其各有利弊。但你要时刻牢记图标尺寸——未经过优化的图片不能传到网上。另一方面，矢量图通常比较小，不过部分比较老的浏览器可能不支持矢量图。还有，如果图标有很多曲线，那有可能会比位图还大，所以要明智取舍。

折叠屏常见适配问题

前面讲到折叠屏的适配，首先是一个设计问题，然后才是一个适配问题。这里我们这里讨论的是违背以上9项基本原则的情况。以下案例基于三星 Galaxy Fold 测试。

违背“最大值和最小值“原则

• 未设置合适的max-width

  

由于设置的max-width较小，在Galaxy Fold展开态下，页面两侧有空隙。

• 子元素超出max-width规定范围

违背”相对单位“原则

这里“看相似”按钮使用 px 设置尺寸，在一般手机上看上去正常，但是在折叠屏手机上就会显得很小。 采用 rem 设置尺寸后就显示正常了。

对折叠屏的一些畅想

1）折叠的方式会越来越多，屏幕会越来越宽

如LG最新申请的一项专利显示，其可能正在研发一款三折手机，将来手机的尺寸可能会更加接近笔记本电脑显示器尺寸。或许像热门美剧《西部世界》中展示的手持折叠电脑在不远的将来就会实现。

2）前端交互的方式会更加丰富

如：“折”手机这个动作可以算作一个事件（需系统支持提供），如果权限设置合理，可以用来区分人机，不用再看花眼选图片了；半折”分屏，实现双屏联动。

目前来说”折“这个事件虽然没有，然是要识别用户是有有做折叠和展开动作，可以通过监听resize事件来代替。

3）屏幕变宽带来的新的体验

比如说，在折叠屏展开状态的模式下，你将可以一边看直播，一遍看相关产品，二者相互不影响。

图片类应用一是可以放的更大，看的细节更多，二是能实现在折叠屏展开状态下一侧看预览，一侧显示完整图片，更方便我们浏览图片。

随着屏幕的变大，一个窗口下可能放下多个任务，同时运行多个 APP。

参考

https://blog.froont.com/9-basic-principles-of-responsive-web-design/

---

▼

原创系列推荐

▼

1. JavaScript 重温系列（22篇全）

2. ECMAScript 重温系列（10篇全）

3. JavaScript设计模式 重温系列（9篇全）

4. 正则 / 框架 / 算法等 重温系列（16篇全）

5. Webpack4 入门（上）|| Webpack4 入门（下）

6. MobX 入门（上） ||  MobX 入门（下）

7. 59篇原创系列汇总

回复“加群”与大佬们一起交流学习~

点这，与大家一起分享本文吧~