本科毕业设计的前端技术总结(一):响应式设计与浏览器兼容

本科毕业设计的前端技术总结(一):响应式设计与浏览器兼容

过年期间又拾起了两年前的毕业设计,当时是给学院的媒体工作室做了个官网,还包括一个ASP.NET MVC实现的作品管理系统和交流社区。



媒体工作室的主要业务是拍视频、视频后期处理和平面设计,以实践教学为宗旨(并以揽私活为生),所以官网的首页部分需要做得炫酷一点。想当年为了答辩租了两个月服务器,一月120,还是有点小贵的。毕业以后由于没人续费,这个官网和整个作品社区就凉了……这次我把首页部分单拎了出来,用Webpack优化了一遍传到了GitHub Pages。虽然是静态的,但终于有一个永久免费的服务器了。


这次趁热把以前的东西总结一下,不然又会像这次一样一上手什么都忘了。先列举下该页面主要用到的技术:

  • 响应式设计与浏览器兼容
  • 视频播放的控制(懒加载、loading进度条等)
  • 将AE动画转化为svg动画在网页上播放
  • canvas动画
  • 自定义字体、拆分字体文件
  • 引入单文件方式使用Vue
  • 用Webpack进行打包、图片压缩等
  • 模块按需进行懒加载


总结的点比较多,也比较细碎杂乱,合在一篇文章里实在是太反人类了。所以我打算分三篇文章,这次先总结下响应式设计和浏览器兼容的部分。


开始之前,放一下页面成品链接和对应的Github仓库地址。由于国内GitHub的速度你懂的,可能需要耐心等待一会儿才能将页面所有元素完全加载出来。

深度映像工作室zamhown.github.io图标zamhown/divs-homepagegithub.com图标

总目录


第一部分 响应式设计与浏览器兼容(本文内容)

一、概览

二、响应式设计

三、浏览器兼容


第二部分 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的布局可以很方便适配手机端。

PC和平板布局


手机端布局


后面“团队”部分的设计思路和“作品”很像。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上使用“添加到主屏”按钮将网站添加到主屏幕时采用设定好的图标。这个在本专栏之前的文章中也有提到。

HowardZ:APP图标设计小技巧:在iOS上快速获得APP图标的真实预览图zhuanlan.zhihu.com图标


效果如下(图标在右下角):


而且图标也会出现在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库的局限。所以只能“优雅降级”,用视频来代替动画。


第一部分结束,未完待续~

编辑于 2019-02-28

文章被以下专栏收录