响应式开发总结

时间 2019-11-18

标签响应开发总结繁體版

原文原文链接

响应式

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

字体大小响应

这里的字体大小指的是用户本身设置或者设备的默认字体大小。一样是12px大小的字符在不一样设备上对用户的观感是不同的，可是设备总会提供一个观感还不错的默认字体大小（或者用户本身指定的）。因此为了让咱们的网站的文字在不一样设备上也能有不错的观感，网站应该使用em代替px。em定义的是一个相对大小，设计者经过它能够定义哪些地方的字应该大一些，哪些地方的字应该小一些，可是不规定哪些地方的字必须多大。跨域

屏幕尺寸响应

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

固定布局：页面居中，两边留白，他能适应大于某个值必定范围的宽度，可是若是太宽就会有不少留白，太窄会出现滚动条，在PC页面上很常见。
流动布局：屏幕尺寸在必定范围内变化时，不改变模块布局，只改变模块尺寸比例。比固定布局更具响应能力，两边不留白，可是也只能适应有限的宽度变化范围，不然模块会被挤（拉）得不成样子。
自定义布局：上面几种布局方式都没法跨域大尺寸变化，因此适当时候咱们须要改变模块的位置排列或者隐藏一些次要元素。
栅格布局：这种布局方式使得模块之间很是容易对齐，易于模块位置的改变用于辅助自定义布局。

屏幕精度响应

屏幕间的像素精度差别致使固定像素在不一样设备上实际尺寸会有比较大的差异，为了解决这个问题咱们使用弹性布局，弹性布局采用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，并进行了缩小。可是做为专门为移动端设计的页面咱们并不须要这种处理，因此经过以下代码去除缩放。这个代码被主流移动浏览器兼容。

<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no" />

去除点击高亮

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

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

该属性在webkit内核浏览器上有效，参考连接：https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//appleref/doc/uid/TP30001266-webkit_taphighlightcolor

但在移动端IE10上，须要以下代码才能去除

<meta name="msapplication-tap-highlight" content="no" />

参考：http://msdn.microsoft.com/zh-cn/library/ie/bg182645

滚动回弹特效

经过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毫秒）。

参考连接：https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW1

触摸屏上的伪类

另外在Safari上使用hover和active位类时，手指点击一次连接，那么那个连接的hover会被一直触发，若是长按一个连接，那么他的active会被一直触发。因此目前看来使用css伪类是不保险的，只能经过js模拟。

video元素在Safari上对触摸事件的影响

iphone平台的video元素所在区域会被屏蔽全部触摸事件，并且是和DOM结构无关的区域性屏蔽，一个元素被绝对定位到video元素区域也会被屏蔽事件，而且video被overflow:hidden以后一样。因此想在iphone上作一个视频点击播放这种效果，只能本身弄张图片和一个播放按钮，而后点击后调用一个舞台外的video元素播放。 ipad平台一样存在这个问题，可是若是把video标签的controls属性去掉就能恢复正常。这意味着想要解决这个问题必须自定义UI而不能使用系统UI。我认为这个问题应该是IOS平台自带的UI形成的，只是iphone没法经过controls属性去掉UI。

scroll与touchmove

在Safari上scroll事件不如PC上发生得那么频繁，只有在页面滚动动画结束以后才会很吝啬得发生一次。若是须要比较实时得检测用户把页面拖动到什么位置了，建议使用touchmove事件。