【适配】436- 你应该知道的折叠屏手机适配

随着三星 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或图标字体。其各有利弊。但你要时刻牢记图标尺寸——未经过优化的图片不能传到网上。另一方面，矢量图通常比较小，不过部分比较老的浏览器可能不支持矢量图。还有，如果图标有很多曲线，那有可能会比位图还大，所以要明智取舍。