响应式开发总结

文档里面的内容很多很杂,一般用法是想知道啥直接进去搜索。

响应式

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

字体大小响应

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

屏幕尺寸响应

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

固定布局:页面居中,两边留白,他能适应大于某个值一定范围的宽度,但是如果太宽就会有很多留白,太窄会出现滚动条,在PC页面上很常见。

流动布局:屏幕尺寸在一定范围内变化时,不改变模块布局,只改变模块尺寸比例。比固定布局更具响应能力,两边不留白,但是也只能适应有限的宽度变化范围,否则模块会被挤(拉)得不成样子。

自定义布局:上面几种布局方式都无法跨域大尺寸变化,所以适当时候我们需要改变模块的位置排列或者隐藏一些次要元素。

栅格布局:这种布局方式使得模块之间非常容易对齐,易于模块位置的改变用于辅助自定义布局。

屏幕精度响应

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

交互方式响应

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

网络状况响应

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

其他功能响应

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

使用场景响应

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

时间: 2024-10-28 08:28:50

响应式开发总结的相关文章

响应式开发中合理选定CSS媒体查询分割点

本文响应式开发中合理选定CSS媒体查询分割点翻译自David Gilbertson的The-100%-Correct-Way-To-Do-CSS-breakpoints一文.本文唔看上去有些拗口,不过其核心是在于给出合适的Media Query命名与编写方式. 本文从属于笔者的Web 前端入门与最佳实践中的Web 响应式开发系列文章.   在阅读本文的时候,反而希望你能先忘却关于CSS.Web开发那些你已经知道的东西,我们今天讨论的并不是多么复杂深奥的内容,如果你觉得准备好了那我们可以从下面这个

使用bootstrap3开发响应式网站_javascript技巧

本文实例为大家分享了bootstrap3响应式网站开发代码,供大家参考,具体内容如下 第一次使用bootstrap3,发现对移动支持得不错,可以很快的开发出一个支持移动和PC端的网站. 下面就是本文的实例,具体代码: 时间线来自国外网站,使用到的css如下 .timeline { list-style: none; padding: 20px 0 20px; position: relative; } .timeline:before { top: 0; bottom: 0; position:

响应式网页设计:rem设置网页字体大小自适应

文章简介:响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求.响应式的初衷是为了让信息更好的传递交流,让所有人无障碍的获取信息,同时这也是 Web 的初衷. 首先简单科普一下什么是响应式网页.响应式网页是指会根据输出设备的分辨率不同,而自动调整布局的网页.同时,在输出设备分辨率改变时,也能及时自动调整.说穿了,就是三个字:自适应. 响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求.响应式的初衷是为了让信息更好的传递交流,让所有人无障碍的获取信息,同时这也是 Web

响应式设计的现状与趋势

  从2012年开始到2014年,各大家对Web设计的趋势预测中,都提到响应式设计.2015年网页设计趋势预测中,响应式仍在继续.这个经历了几年依然大热的响应式,在过去的几年里,快速巩固了自己的地位,并掀起了一股网页设计新标准的浪潮. 源起 2010年5月,伊桑.马科特(Ethan Marcotte)在"A List Apart"写了一篇开创性的文章(题为"Responsive Web Design" ),他利用三种已有的工具:流动布局(Fluid grids).媒

漫谈响应式网页设计

  1. 如何理解响应式设计(RWD) zhongfan :学究一些,首先大家先了解一下响应,然后再讲一下设计,响应就是我发出的请求能得到什么样子的回复,比如我说 "你好",你会很容易的给我回复"你好",因为大家都是中国人,如果我说"hello",我们这代人如果上过初中,他也会给我说"Hello",但是如果 我给对你说"Bonjour",那可能只有高配的人才可能知道了.这里面,就举了一个例子,我的应答对象就

网站设计分析:漫谈响应式设计 交互上的那些不同

1. 如何理解响应式设计(RWD) 学究一些,首先大家先了解一下响应,然后再讲一下设计,响应就是我发出的请求能得到什么样子的回复,比如我说"你好",你会很容易的给我回复 "你好",因为大家都是中国人,如果我说"hello",我们这代人如果上过初中,他也会给我说"Hello",但是如果我给对你说"Bonjour",那可能只有高配的人才可能知道了.这里面,就举了一个例子,我的应答对象就相当于我们要讲的响应式的设

网页响应式设计的现状与趋势

网页响应式设计的现状与趋势 响应式设计的现状与趋势-banner720 从2012年开始到2014年,各大家对Web设计的趋势预测中,都提到响应式设计:2015年网页设计趋势预测中,响应式仍在继续.这个经历了几年依然大热的响应式,在过去的几年里,快速巩固了自己的地位,并掀起了一股网页设计新标准的浪潮.这里本人基于一些资料文献及自己的陋见,谈谈响应式设计的一些现状和趋势. 源起 2010年5月,伊桑.马科特(Ethan Marcotte)在"A List Apart"写了一篇开创性的文章

Web响应式设计案例:响应式设计开发Lot18

文章描述:有关 Web 响应式设计的 7 点启发. 开发者视角中的优秀并不意味着用户也有同样的感受.国外知名电子商务网站 Lot18 的高级前端开发人员Vince Allen,特别撰文讲述了采用响应式设计开发Lot18的背后故事和7条经验. 全文如下: 为Lot18 这样迅猛发展的电子商务公司工作是件激动人心的事情.知道几个月后,在开发团队面临一项重大决择的时候,我们狂热的情绪才逐渐平复下来.我们的困扰是:是 在网站的原有引擎(该引擎很有可能在网站发布几个月后就难以为继)上继续开发还是重新搭建全

使用jqMobi开发app基础之响应式布局介绍

在使用jqMobi开发app基础:Grid布局 中介绍了Grid布局,col2在大的屏幕上会显示为两列,col3会显示为3列,但如果屏幕小就会显示为一列,这就是响应式布局,也就是根据屏幕大小,动态改变css样式的一种布局.这种布局的关键字是@media 在af.ui.css文件中搜索media找到如下css样式: #afui .col2, #afui .col3, #afui .col1-3, #afui .col2-3 { float: none; width: 100%; } #afui .