本科毕业设计的前端技术总结（一）：响应式设计与浏览器兼容
过年期间又拾起了两年前的毕业设计，当时是给学院的媒体工作室做了个官网，还包括一个http://ASP.NET MVC实现的作品管理系统和交流社区。
媒体工作室的主要业务是拍视频、视频后期处理和平面设计，以实践教学为宗旨（并以揽私活为生），所以官网的首页部分需要做得炫酷一点。想当年为了答辩租了两个月服务器，一月120，还是有点小贵的。毕业以后由于没人续费，这个官网和整个作品社区就凉了……这次我把首页部分单拎了出来，用Webpack优化了一遍传到了GitHub Pages。虽然是静态的，但终于有一个永久免费的服务器了。
这次趁热把以前的东西总结一下，不然又会像这次一样一上手什么都忘了。先列举下该页面主要用到的技术：
- 响应式设计与浏览器兼容
- 视频播放的控制（懒加载、loading进度条等）
- 将AE动画转化为svg动画在网页上播放
- canvas动画
- 自定义字体、拆分字体文件
- 引入单文件方式使用Vue
- 用Webpack进行打包、图片压缩等
- 模块按需进行懒加载
总结的点比较多，也比较细碎杂乱，合在一篇文章里实在是太反人类了。所以我打算分三篇文章，这次先总结下响应式设计和浏览器兼容的部分。
开始之前，放一下页面成品链接和对应的Github仓库地址。由于国内GitHub的速度你懂的，可能需要耐心等待一会儿才能将页面所有元素完全加载出来。
总目录
第一部分 响应式设计与浏览器兼容（本文内容）
一、概览
二、响应式设计
三、浏览器兼容
第二部分 Video、SVG、Canvas与Font
四、视频部分
五、Lottie动画部分
六、Canvas动画部分
七、自定义字体与拆分字体
八、其他效果与彩蛋
第三部分 Webpack配置、打包与懒加载
九、Webpack与各loader配置
十、开发与生产配置拆分
十一、模块懒加载
十二、其他减少请求数和压缩资源大小的方法
一、概览
我们先整体地看一下成品页面。首先，在PC端第一屏是一个全景视频做背景（工作室作品《It's Time》的节选），Logo和主菜单放在上方左右侧。
向下拉进入第二屏时，全景视频逐渐变暗，Logo和主菜单部分变黑并形成一个Header。第二屏是“作品”部分，最左边的作品通过svg动画（lottie-web库）自动预览，右上方的作品当鼠标移入就使用视频模式预览。
下面是“关于我们”部分，有一段中规中矩的文字展示，鼠标移入合影会触发css强调动画。
再下面是“团队”，有六位成员的照片和简介。如果鼠标不移入这一部分，成员简介将随机展示；如果鼠标移入其中一张照片，则展示对应成员的简介，并停止随机展示。展示简介时，成员照片呈现毛玻璃和下陷效果。画面左边斜线填充的矩形会随着滚动条进行相对微动。
最后是“联系”部分。背景仍为第一屏的视频，但是叠加了一层铁丝网一样的效果，画面也更加黯淡。前景左部是Logo和联系方式，右部是简易留言板。鼠标移到“向我们留言”按钮时会有一个hover效果。
二、响应式设计
众所周知，只用考虑PC端，并且只考虑Chrome浏览器的前端项目是幸福的。然而幸福往往非常珍贵，因为我们往往要考虑所有主流环境，特别是做一个有宣传作用的官网。如今随着各种智能设备的发展，面对如此千差万别的屏幕分辨率，为每种设备专门做一套网页的做法早已不符合时代的需要。这时，催生了响应式网页设计（Responsive Web Design）的概念。
响应式网页设计的理念是：Web页面应当根据用户的行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行对应的调整。换句话说，页面应该有能力去自动响应用户的设备环境。
在技术上，响应式网页设计通常采用css媒体查询、JavaScript的屏幕分辨率监测、css的流动布局及百分比布局、弹性图片、以及css3新增的弹性盒子布局（Flexible Box Layout）和网格布局（Grid Layout）来实现。目前也有许多前端框架和组件库可以做到这一点，从最老派的Bootstrap到最新潮的Ant Design都有响应式支持。
在效果上，我希望当用户在PC上慢慢调整浏览器宽度时，页面可以流畅地改变布局。以“关于我们”为例，有针对PC宽屏、PC普通屏、平板、手机四种宽度下的四种布局：
为了能在浏览器宽度改变时让网页版式进行平滑的变化，除了媒体查询以外，可以试试css3的transition属性，它能自动给元素的样式改变加上过渡动画，非常傻瓜式的操作。还记得第一次接触transition的时候简直改变了我对css的看法。
一般情况下，当你在PC端把任意宽度的版式做好，那么平板和移动端已经完成一半了。我们之后只需要针对不同平台进行优化就好。但是很明显，移动端和PC端差异极大，体现在分辨率和交互方式（鼠标或触摸）上，因此不得不处理一些繁琐的细节。
为了在js里判断用户设备类型，我使用了device.js库。它可以用来检测设备的操作系统（比如 iOS，安卓，黑莓，Windows，Firefox OX），方向（横屏或者竖屏），类型（平板或者移动设备），在<html>上自动添加相应的class，并提供了一些js函数用来判断设备。
这个页面对移动端的优化大体如下：
1. 最基础的viewport
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">这已经是常识了，视区（Viewport）涉及到物理像素和逻辑像素的转换问题，以前面试时曾被问到过具体每个设置项的含义。可参考：响应式 Web 设计 - Viewport
2. 移除所有背景视频，改用canvas动画
两年前开发这个页面的时候，移动端对背景视频的支持还很不友好，体验也不统一。有的浏览器对视频优化过度，用户一点击视频就会自动弹出小窗播放，控制栏也去不掉。除此之外，用户的流量也需要考虑，出于道义不能假设用户用手机查看网页时总是希望加载背景视频的。因此这个页面在移动端不加载也不显示视频，第一屏用canvas动画代替：
这是一个聚光灯效果叠加在背景图片上，弥补了去掉视频后第一屏的动感的不足。这个动画的实现将在第六节简要介绍。
3. 页面由横宽到竖长带来的版式调整
PC端屏幕横宽，信息量大；移动端屏幕竖长，信息量小。如果不考虑分辨率大小，长短边的互换也会为版式调整提出很复杂的要求。下面举两个版式调整的例子。
首先是PC端展开的主菜单在移动端收进汉堡按钮，这个设计也是老生常谈了，就连苹果官网也不能免俗。这个页面里的Header主要有PC、平板、手机三种模式。除了点击事件的捕获，所有效果都可以通过css实现。
第二个是之前提过的Flex Box的应用。“作品”部分的展示框架使用了Flex Box，由于是两年前的实现，现在看来使用Grid Layout要更合适。4:2:1:1的布局可以很方便适配手机端。
后面“团队”部分的设计思路和“作品”很像。6个正方形，PC端2行3列，平板端3行2列，手机端6行1列，就不再赘述了。
4. 网页页脚部分的改变
页脚部分除了版式的改变以外，还有两个小细节。第一是微信公众号二维码的展现，在PC端鼠标移到微信图标上就会冒出一个带二维码的气泡：
但移动端明显不太适合这样做。我的处理方式是弹出一个模态框解决。
如果是在微信里打开这个网页，由于可以长按图片进行二维码识别，模态框的引导语就变成了这样：
第二处是QQ。在PC端网页上，点击QQ图标后会自动调起QQ以供进行临时会话，超链接是这样的：
tencent://message/?uin=<你的客服QQ号>&Site=<你的域名>&Menu=yes但在手机端，唤起手机QQ的超链接是不一样的：
mqqwpa://im/chat?chat_type=wpa&uin=<你的客服QQ号>&version=1&src_type=web&web_src=<你的域名>而在微信里则会把这个链接屏蔽，对应的处理是弹出一条提示：
三、浏览器兼容
浏览器兼容也算是一种广义的响应式设计。不同浏览器内核对h5、css3和js特性的支持各有差别，开发阶段需要不断地测试。目前这个页面在Chrome、Firefox、Safari、Edge、IE11和微信内置的魔改版X5内核上都没什么问题（如果在微信打开，需要点击“访问原网页”）。
为了更方便地兼容多种浏览器，这个页面用到了两个库。一个是prefix free，可以让你在写css属性时不用加浏览器前缀（如-webkit-），这个库会自动补上。另一个是modernizr，可以让你在js里判断某个特性在当前的浏览器下是否支持，同时也像device.js一样把可用的特性作为class放在<html>标签上。
本页面针对不同浏览器所做的优化如下：
1. iOS版Safari滑动不顺畅问题的解决
-webkit-overflow-scrolling: touch;这是一个常见的问题，将如上的css属性加在所有带滚动条的元素上就可以避免。
2. 移动版Chrome的地址栏颜色
<meta name="theme-color" content="#000000">可能很多人发现用移动版Chrome进入B站以后，地址栏永远是粉色的。这个<meta>的作用就是如此：自定义Chrome地址栏的颜色。这里我设成了黑色，有助于获得更有整体性的视觉体验。
3. Safari的网页图标定义
<link rel="apple-touch-icon" href="<大小为256*256的png图标地址>" />这是iOS设备私有属性，添加这个标签后，在Safari上使用“添加到主屏”按钮将网站添加到主屏幕时采用设定好的图标。这个在本专栏之前的文章中也有提到。
效果如下（图标在右下角）：
而且图标也会出现在Safari的个人收藏中，如果网站被添加到个人收藏的话。
4. Safari主屏幕入口优化
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style"> 第一个<meta>标签表示用户从主屏幕快捷方式（上文设定的那个）打开网页后默认全屏显示，第二个<meta>标签和Chrome那个作用相近，全屏显示时上方状态栏设定为黑色。效果如下：
5. IE11和Edge上的处理
IE11和Edge其实已经很好了，基本上兼容所有主流特性，有时还会有惊喜。但是这个页面用到的svg动画（通过lottie-web库播放，在第五节会介绍）在两年前不被支持，这可能是lottie-web库的局限。所以只能“优雅降级”，用视频来代替动画。
第一部分结束，未完待续~
