响应式开发
【Jobeen】

Ethan Marcotte在2010年5月份提出的一个概念,旨在让一个网站同时兼容多种设备,而不是为不同设备定制不同的版本。如果把我们的网站看做一个程序的话,响应式设计要求网站能提供更多用户端可选的参数,让用户拥有更多的控制权。

字体大小响应

这里的字体大小指的是用户自己设置或者设备的默认字体大小。同样是12px大小的字符在不同设备上对用户的观感是不一样的,但是设备总会提供一个观感还不错的默认字体大小(或者用户自己指定的)。所以为了让我们的网站的文字在不同设备上也能有不错的观感,网站应该使用em代替px。em定义的是一个相对大小,设计者通过它可以定义哪些地方的字应该大一些,哪些地方的字应该小一些,但是不规定哪些地方的字必须多大。

屏幕尺寸响应

屏幕尺寸是我们主要需要响应的地方,屏幕的尺寸大小,宽高比等因素都会影响我们的布局,内容的的大小等。比较常用用来解决尺寸的布局方式有固定布局,流动布局,栅格布局,这些布局方式常常混合使用。

屏幕精度响应

屏幕间的像素精度差异导致固定像素在不同设备上实际尺寸会有比较大的差别,为了解决这个问题我们使用弹性布局,弹性布局采用em作为单位,其原因和"字体大小响应"中提到的一样。但是由于使用了em作为单位,使得我们实际上是无法得知界面实际尺寸的,这回导致页面上的图片有可能过大(浪费带宽)或者过小(模糊),,所以对于图片我们需要根据实际需要的大小选择性加载对应的尺寸版本。另外在最新(ipad3,iphone4)的IOS设备上,1px实际上会占4px(由于像素密度高),所以图片精度对于这些问题都要单独处理。

交互方式响应

不同的设备支持不同的交互方式,可能是触屏或者鼠标操作,再可能是按键操作。这里可以采用"渐进增强"的方式,为用户定义基本的操作方式,而在先进的设备上提供更接地气的操作(比如手势)。

网络状况响应

用户在慢速网络的情况下可以选择不下载一些消耗带宽的资源。

其他功能响应

比如GPS,陀螺仪,电话等功能

使用场景响应

比如用户在车上,还是在走路,可以根据这些情况提供给用户不同的操作体验。

用户偏好响应

不同的用户有着不同的偏好,比如左右手,操作习惯,反映速度,眼睛辨别能力,网站都可以考虑做出响应。

响应式的误区 我要响应哪些设备?

设计响应式的目的是为了应付现在的设备或者将来未知的设备,像最开始的比喻,如果网站是个程序,那么响应式网站可以提供更多参数选项。并且,如果你提供了这个参数,那么就要做好它可能是任何值的准备,至少是心理准备。设计师在设计的时候可以拿一些典型设备做参照,但是最后你要忘掉这些设备。

是不是响应的设备类型越多越好?

响应式设计是一个抽象,有挑战性的工作,在设计中为了兼容不同的设备需要权衡舍弃一些原本在特定设备上更好的设计。并且在前端上为了要兼容不同设备,也需要做大量兼容性处理。响应得设备类型越多意味着设计的限制越多,前端需要做的工作越多,成本越高,而体验却只降不升。所以根据产品需求响应得适可而止就行了。

移动端用到的前端技术 Media Query

用于查询设备是否符合某一特定条件,它可以在css中,link标签属性中,js中使用。这些特定条件包括屏幕尺寸,是否可触摸,屏幕精度,横屏竖屏等信息。我们可以根据这些信息来对页面做一些特殊处理从而达到响应目的。

相关链接和用法

在ie8及以下不支持Media Query,可以通过https://github.com/scottjehl/Respond兼容。

使用em做尺寸单位

用于文字大小的响应和弹性布局。

禁止页面缩放

原本IOS手机页面为了兼容pc的页面默认屏幕宽度为800,并进行了缩小。但是作为专门为移动端设计的页面我们并不需要这种处理,所以通过如下代码去除缩放。这个代码被主流移动浏览器兼容。

相关链接:https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

去除点击高亮

在移动端点击一个可点击元素默认会出现一个元素大小的半透明颜色覆盖到元素上。这是为了让用户感觉到这个元素已经被点击了。但有时候这个效果不是我们希望的,可以通过如下全局css设置把它去掉

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
该属性在webkit内核浏览器上有效
移动端IE10上,需要如下代码才能去除

参考:

滚动回弹特效

通过overflow:scroll可以使内容可以滚动,但是没有物理弹性,比较生硬,没有滚动条。如果想要IOS那种弹性的滚动效果可以使用css

-webkit-overflow-scrolling:touch;

但是加上这个css后会产生滚动条(通常不显示,滚动才显示)。非要去掉滚动条只能通过JS模拟,通过这个Kissy组件可以做到:https://github.com/hongru/kissy-mscroller,需要直接引用fakescroller,如果直接引用index会在IOS平台自动变成-webkit-overflow-scrolling。

触摸事件 四种基本触摸事件

目前Safari只支持TouchEvent和GestureEvent,其他手势需要自己定义。TouchEvent主要有touchstart,touchmove,touchend,touchcancel四种。参考链接:https://developer.apple.com/library/safari/documentation/UserExperience/Reference/TouchEventClassReference/TouchEvent/TouchEvent.html

触摸屏上的鼠标事件

同时Safari帮你模拟了鼠标事件,但是click事件会有明显的延迟。一般采用封装好的手势框架去模拟tap操作代替click。Kissy的Event模块带有tap事件。但是在点击一个绑了tap事件的元素时,周围有可以点击(click)的元素,那么手指可能会触碰到这个元素,导致tap事件和click事件均被触发。但是click事件触发会在tap事件之后,所以我临时的解决方案是在tap事件发生后阻止document上所有的click事件一段时间(500毫秒).