响应式开发总结

关注

转载最新推荐文章于 2026-06-20 09:21:49 发布 859 阅读 AI 写同款· GEO 优化 ›

前端响应式开发剖析 响应式设计是当今网页开发中至关重要的理念和技术手段，其核心目标是确保同一个网站能够在多种多样的设备上，无论是传统的PC端，还是日益普及的移动端（涵盖平板设备、手机的横屏以及竖屏等不同状态），都展现出高度的兼容性和良好的视觉效果。这意味着用户无论使用何种设备访问网站，都能获得流畅、舒适且一致的浏览体验，无需为不同设备的适配问题而困扰。例如，一个电商网站采用响应式设计后，用户在PC端可以清晰地看到丰富的商品分类、详细的产品介绍和高清的图片展示，方便进行细致的筛选和比较；阅读详情

响应式

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

字体大小响应

这里的字体大小指的是用户自己设置或者设备的默认字体大小。同样是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。