什么叫响应式网页,扫盲帖

摘自百度

响应式Web设计(Responsive Web design)的理念是:

页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样,我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

一切弹性化:

我们通过响应式的设计和开发思路让页面更加"弹性"了。图片的尺寸可以被自动调整,页面

液态图片技术

布局再不会被破坏。虽然永远没有最完美的解决方案,但它给了我们更多选择。无论用户切换设备的屏幕定向方式,还是从台式机屏幕转到iPad上浏览,页面都会真正的富有弹性。

通过液态网格和液态图片技术,并且在正确的地方使用了正确的HTML标记。

响应式图片:

响应式图片技术思想:不仅要同比的缩放图片,还要在小设备上降低图片自身的分辨率。这个技术的实现需要使用几个相关文件,我们可以在Github上获取。包括一个JavaScript文件(rwd-images.js),一个.htaccess文件,以及一些范例资源文件。大致的原理是,rwd-images.js会检测当前设备的屏幕分辨率,如果是大屏幕设备,则向页面head部分中添加BASE标记,并将后续的图片、脚本和样式表加载请求定向到一个虚拟路径"/rwd-router"。当这些请求到达服务器端,.htacces文件会决定这些请求所需要的是原始图片还是小尺寸的"响应式图片",并进行相应的反馈输出。对于小屏幕的移动设备,原始尺寸的大图片永远不会被用到。

时间: 2024-12-26 15:46:11

什么叫响应式网页,扫盲帖的相关文章

什么叫响应式手机网站设计

1.什么叫响应式网页设计响应式Web设计(Responsive Web design)的理念是:页面的设计与开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整. 具体的实践方式由多方面组成,包括弹性网格和布局.图片.CSS media query的使用等. 无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率.图片尺寸及相关脚本功能等,以适应不同设备: 换句话说,页面应该有能力去自动响应用户的设备环境. 响应式网页设计就是一个网站能够兼容多个

hadoop快速扫盲帖,从零了解hadoop

1.MapReduce理论简介 1.1 MapReduce编程模型 MapReduce采用"分而治之"的思想,把对大规模数据集的操作,分发给一个主节点管理下的各个分节点共同完成,然后通过整合各个节点的中间结果,得到最终结果.简单地说,MapReduce就是"任务的分解与结果的汇总". 在Hadoop中,用于执行MapReduce任务的机器角色有两个:一个是JobTracker:另一个是TaskTracker,JobTracker是用于调度工作的,TaskTracke

响应式网页设计【转载】

概念 响应式网页设计最初是由 Ethan Marcotte 提出的一个概念:为什么一定要为每个用户群各自打造一套设计和开发方案?Web设计应该做到根据不同设备环境自动响应及调整.当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等,它更像是一种对于设计的全新思维模式:我们应当向下兼容.移动优先. 背景 PC互联网加速向移动端迁移:2012年12月底我国网民规模达到5.64亿,互联网普及率为42.1%,手机用户占网民总数的74.5%.预计到2015年,移动互联网的数据流量将超越P

重温"什么是响应式网页设计?响应式布局的实现原理"

概念 响应式网页设计最初是由 Ethan Marcotte 提出的一个概念:为什么一定要为每个用户群各自打造一套设计和开发方案?Web设计应该做到根据不同设备环境自动响应及调整.当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等,它更像是一种对于设计的全新思维模式:我们应当向下兼容.移动优先. 背景 PC互联网加速向移动端迁移:2012年12月底我国网民规模达到5.64亿,互联网普及率为42.1%,手机用户占网民总数的74.5%.预计到2015年,移动互联网的数据流量将超越P

响应式网页设计简单入门(强烈推薦!!!!)

响应式网页设计简单入门 Overview: 构造基本的HTML页面 动态加载样式表 Viewport 字体缩放 侧边栏 导航菜单 图片自适应 其他 总结 说到响应式网页设计(Responsive web design),最近在谷歌加上碰到个奇葩贴子,通过一个原始到无法再简单的网页Motherfucking Website及满屏幕的fuck道出了网页设计的真谛,这孩子不是个激进分子就是个报复社会型的货没错,虽然整篇文章就像是泼妇骂街,但我特么是笑着读完的.. 统计了下全文共用Fuck (包括fuc

HTML5+CSS3的响应式网页设计:自动适应屏幕宽度

这几天都在修改博客上面的样式.本来用的是d83.0的模板.自己又修改了许多地方,其中自己修改的一些地方在手机里面显示的效果不是很理想,于是想改成自适应的效果.对CSS3不是特别的熟练,只能去网上找找案例看了.发现一个不错的文章.写的比较入门,也很仔细.所以拿过来分享给大家.如果还想看图片的响应式案例可以看我找的另外的一篇<分享一个非常有用的HTML5+CSS3响应式图片案例>. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈

响应式网页

页面有能力去自动响应用户的设备环境,响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本. 响应式Web设计是在开发和设计网站过程中产生的一种方式,它的目的是让内容布局能随用户使用显示器的不同而变化.再明确点说,这种设计概念,就是让原本1292像素宽,4栏的内容,能够很好地显示在1025像素宽的用户屏幕上,同时还能自动简化成2栏.当然,让它很好的适应智能手机和其他种类电脑的屏幕也就成了水到渠成的事了.这种特殊的设计形式就被成为“响应式Web设计”页面的设计与开发应当根据

响应式网页设计

随着越来越多类型的移动设备的普及,网页设计也随之变化,响应式网页设计应用而生,目前已有有很多比较流行的框架解决此问题,无论切换任何设备,都会自动根据设备的大小进行动态变化,无需为每个量身定做不同类别的网页,大大节省了开发工作量,响应式网页设计已经成为一种趋势. 一.流行的前端(from_end)设计框架很多,大概有以下几种: 1. Bootstrap Boostrap绝对是目前最流行用得最广泛的一款框架.它是一套优美,直观并且给力的web设计工具包,可以用来开发跨浏览器兼容并且美观大气的页面.它

10款设计师必备的响应式网页设计工具

随着便携设备用户的指数级增长,网页设计师采用响应式设计作为多平台布局解决方案,不但节省了设计师的时间,而且从长远角度来讲,响应式设计能够为用户提供更舒适的操作环境. 如果你毫无经验,不知从何开始,那么这份工具列表将大大的帮助你,能够让你的布局更有“弹性”. Simple Grid Simple Grid是难以置信的CSS框架,无所限制的栅格布局,支持不同大小的屏幕. Susy Susy “语义变焦”的栅格系统,无需额外标记和特殊的类,很方便使用Sass的人. Tiny Fluid Grid Ti