作者：龙朝忠
随着三星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设置尺寸后就显示正常了。
对折叠屏的一些畅想
-
折叠的方式会越来越多，屏幕会越来越宽
如LG最新申请的一项专利显示，其可能正在研发一款三折手机，将来手机的尺寸可能会更加接近笔记本电脑显示器尺寸。或许像热门美剧《西部世界》中展示的手持折叠电脑在不远的将来就会实现。
-
前端交互的方式会更加丰富
如：“折”手机这个动作可以算作一个事件（需系统支持提供），如果权限设置合理，可以用来区分人机，不用再看花眼选图片了；半折”分屏，实现双屏联动。
目前来说”折“这个事件虽然没有，然是要识别用户是有有做折叠和展开动作，可以通过监听resize事件来代替。
-
屏幕变宽带来的新的体验
比如说，在折叠屏展开状态的模式下，你将可以一边看直播，一遍看相关产品，二者相互不影响。
图片类应用一是可以放的更大，看的细节更多，二是能实现在折叠屏展开状态下一侧看预览，一侧显示完整图片，跟方便我们浏览图片。
随着屏幕的变大，一个窗口下可能放下多个任务，同时运行多个APP。
参考：
