你应该知道的折叠屏收集适配

做者：龙朝忠

随着三星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。

参考：

blog.froont.com/9-basic-pri…