当你陪着家人嗑着瓜子，和家人一起看着春晚，顺便拿着手淘参与春晚抽奖互动的时候，杭州还有两百多程序员还奋战在一线当中。现在年也过完了，奖也抽了，红包也拿了。也该好好回来工作的时候了。这次很荣幸，自己能参与手淘过年项目（红包开光和春晚互动项目）的项目中，虽然仅仅参与其中的部分工作，但事后感觉有些东西还是应该总结总结的，为之后的项目做准备。那么简单的来总结一下，我自己在参与项目中用到的一些前端技术。

面对于不同移动设备，特别是针对于屏幕高度的设计和适配，一直是困扰着视觉和前端。特别是设计师和前端开发人员之间的协调，沟通的成本也随着增加。那么这篇文档，主要是用于移动端设计和适配（针对屏幕高度方面），希望通过文档的形式能减少设计师和开发人员之间的一些沟通成本，同时让前端开发人员用最低的时间成本来完成终端设备的UI适配工作。

视窗单位一直都存在争议，部分原因是因为移动端浏览器对如何实现视窗单位有着自己的看法，这样就让本来简单的事情变得更加复杂化。一个典型的示例是：vw的计算是否要包含浏览器的滚动条？那么网站的导航或页面控件呢？这些应该算在计算中吗？还有一些设备本身的物理属性（比如iPhone X的刘海）是不容忽视的。

记得在去年双11的互动页面中，我们折腾了一波iPhone8、iPhone8 plus和iPhone X的适配，特别是iPhone X刘海区域的适配。针对这方面的页面适配，沉淀出相应的适配方案。而今年的双11期间，苹果又推出了iPhone XS、iPhone XR和iPhone XR Max以及众多的安卓刘海设备。言外之意，前端在这方面的适配变得越来越复杂。面对众多场景，我们应该怎么去面对呢？接下来聊聊我在今年双11的主互动玩法中是怎么处理的。

在上一篇《手淘Web页面Bar和纵向适配的设计》中聊了互动项目中Bar的工业化标准设计以及对刘海设备带来的变化。我把这一点称为标准化Bar设计给适配带来的优势。今天这篇文章中主要想再花点时间聊聊今年手淘“PK赢能量”互动项目中前端有哪些技术亮点和尝鲜。当然文章涉及到的技术点估计有很多同学都有接触或者使用过。毕竟CSS仅仅是一门表现层语言。废话不多说，直接进入主题吧！

很多年前，前端同学都觉得PC端的适配（兼容处理）难，都认为移动端的时代适配会容易得多，也无需考虑那么多的事情。事实并非如此，移动端的时代同样面临着各种适配的处理。特别是刘海机的出现，前端需要考虑刘海机适配。而如今随着三星Galaxy Fold和华为Mate X折叠屏手机的面世，前端同学接着又要处理折叠屏幕的适配。就我们团队而言，在上个月就接到相关的通知，需要处理折叠屏的适配。碍于真机难得，前段时间就通过模拟机，做了一些简单的适配测试，不过幸运的是，今天拿到了真机（三星Galaxy Fold) ，写了一个简单的Demo，做了一些适配的测试。特此将相关心得和大家一起共享，希望对大家有所帮助。

时间如梭，又一年双11圆满收官了。作为技术宅男除了买买买之外还能和大家聊的就是前端技术了。"淘宝盖楼"上热搜了，我想你应该也参加了双十一淘宝盖楼吧，是不是觉得特别的酸爽。今年有幸参与盖楼的互动活动的开发中备感荣幸，因为我们的努力让全民都爽了。在开始之前要先感谢一下曾经努力的自己！楼盖完了，我们回过头来聊聊这次多人互动PK在开发的时候用了哪些有意思的前端技术。感兴趣的同学，请继续往下阅读。

可折叠Web的说法是可折叠设备带来的。可折叠设备形式多样，从笔记本电脑到手机，再到新奇的双屏幕混合设备。对于这类新发明并没有一个全面的定义，但大多数都可以归为两类。“可折叠”是指屏幕可以折叠的设备（比如华为Mate X，三星Galaxy Z Flip）；而“双屏”设备的屏幕是分开的，但也可以以独特的方式一起工作，以灵活的形式提供生产力（比如，微软的Surface Neo和Surface Duo）。当涉及到Web设计时，这两种类型可能会遵循类似的规则。如果这项技术能大获成功，那么Web设计将面临十年来最大的变革。这对于我们Web开发者而言，也将会开启新的旅程。

早在去年五月份就在《聊聊安卓折叠屏给交互设计和开发带来的变化》一文中和大家初次聊了安卓折叠屏给交互设计和开发将会带来的变化。随着一年多来的变化，在Web开发中也有相应的API专门服务于双屏幕和折叠屏幕，有关于这方面的介绍，前段时间在《可折叠Web可能会给我们带来的变化》一文中和大家有过初步的介绍。虽然这两篇文章从不同的时间段，不同的角度阐述了折叠屏中的开发模式，但我想很多同学还是会因此感到困惑，甚至不知道如何为多屏幕或折叠屏幕这样的设备做相应的Web开发。那么今天，在这篇文章中抛开概念，只聊一些Web API，即 可用于双屏幕和折叠屏的Web API。如果你感兴趣的话，请继续往下阅读。

告诉大家一个好消息，The Screen Fold API 已经进入 W3C规范的ED阶段 了。这个规范主要可以帮助我们以后为使用折叠屏设备用户提供一个更好的用户体验，即 为折叠屏设备在不同的折叠状态（“姿势”）提供相应的布局。这个规范主要由 三星（Samsung） 的 @Diego González 和 英特尔（Intel Corporation） 的 @Kenneth Rohde Christiansen 一起起草的，虽然目前只是处于规范的 ED 阶段，但这为我们今后在折叠屏设备上实现Web布局有了一定的理论依据。也许在未来，这里面的一些属性或API还会有所变动，但这并不影响我们去探究或参与讨论。或许说不定明年，或者后年你就在实际业务中需要面对折叠屏幕的适配需求。如果你感兴趣的话请继续往下阅读。