文档里面的内容很多很杂,一般用法是想知道啥直接进去搜索。
响应式
Ethan Marcotte在2010年5月份提出的一个概念,旨在让一个网站同时兼容多种设备,而不是为不同设备定制不同的版本。如果把我们的网站看做一个程序的话,响应式设计要求网站能提供更多用户端可选的参数,让用户拥有更多的控制权。
字体大小响应
这里的字体大小指的是用户自己设置或者设备的默认字体大小。同样是12px大小的字符在不同设备上对用户的观感是不一样的,但是设备总会提供一个观感还不错的默认字体大小(或者用户自己指定的)。所以为了让我们的网站的文字在不同设备上也能有不错的观感,网站应该使用em代替px。em定义的是一个相对大小,设计者通过它可以定义哪些地方的字应该大一些,哪些地方的字应该小一些,但是不规定哪些地方的字必须多大。
屏幕尺寸响应
屏幕尺寸是我们主要需要响应的地方,屏幕的尺寸大小,宽高比等因素都会影响我们的布局,内容的的大小等。比较常用用来解决尺寸的布局方式有固定布局,流动布局,栅格布局,这些布局方式常常混合使用。
固定布局:页面居中,两边留白,他能适应大于某个值一定范围的宽度,但是如果太宽就会有很多留白,太窄会出现滚动条,在PC页面上很常见。
流动布局:屏幕尺寸在一定范围内变化时,不改变模块布局,只改变模块尺寸比例。比固定布局更具响应能力,两边不留白,但是也只能适应有限的宽度变化范围,否则模块会被挤(拉)得不成样子。
自定义布局:上面几种布局方式都无法跨域大尺寸变化,所以适当时候我们需要改变模块的位置排列或者隐藏一些次要元素。
栅格布局:这种布局方式使得模块之间非常容易对齐,易于模块位置的改变用于辅助自定义布局。
屏幕精度响应
屏幕间的像素精度差异导致固定像素在不同设备上实际尺寸会有比较大的差别,为了解决这个问题我们使用弹性布局,弹性布局采用em作为单位,其原因和“字体大小响应”中提到的一样。但是由于使用了em作为单位,使得我们实际上是无法得知界面实际尺寸的,这回导致页面上的图片有可能过大(浪费带宽)或者过小(模糊),所以对于图片我们需要根据实际需要的大小选择性加载对应的尺寸版本。另外在最新(ipad3,iphone4)的IOS设备上,1px实际上会占4px(由于像素密度高),所以图片精度对于这些问题都要单独处理。
交互方式响应
不同的设备支持不同的交互方式,可能是触屏或者鼠标操作,再可能是按键操作。这里可以采用“渐进增强”的方式,为用户定义基本的操作方式,而在先进的设备上提供更接地气的操作(比如手势)。
网络状况响应
用户在慢速网络的情况下可以选择不下载一些消耗带宽的资源。
其他功能响应
比如GPS,陀螺仪,电话等功能
使用场景响应
比如用户在车上,还是在走路,可以根据这些情况提供给用户不同的操作体验。