说说响应式网页设计

在这里我只说说我对响应式网页设计的理解,具体实现过程就先不说了~

响应式网页设计(RWD,Responsive Web Design)这个术语,由伊桑·马科特(Ethan Marcotte)提出。他在A List Apart发表了一篇开创性的文章,将三种已有的开发技巧(弹性网格布局、弹性图片、媒体和媒体查询)整合起来,并命名为响应式网页设计。

响应式网页设计正是前端界“以人为本”的体现。Web的初衷就是为了让信息更好的传递交流,方便人们无障碍的获取信息。而网页就是人们获取、传递信息的一个接口,信息都展示在网页中,所以网页设计的好坏会直接影响用户体验(当然影响用户体验的还有其他一些方面的问题)。注意,不要认为响应式网页设计很高端,它只是理所当然的,只是我们以前没有这个意识罢了,现在想到了,证明思想慢慢有觉悟了。由于我们的移动互联网发展迅猛,用各种设备上网的人越来越多,所以响应式网页设计应运而生。

那么,响应式网页设计应该遵循什么原则呢,首先是内容优先,然后是移动优先,再就是渐进增强。我认为一个网站最重要的还是内容,页面设计的再好,用户体验再棒,内容不过关,它也不会有长久的发展。移动优先,要从移动端开始设计,因为移动端的屏幕小,展示的内容有限,这样你才能知道哪些才是最重要的、最应该着重展示的。渐进增强,先保证最低版本浏览器具有最基本的功能,不影响使用,然后再给高版本浏览器添加新的功能或表现,而优雅降级正好跟渐进增强相反,之前不理解它们的区别,认为结果都是一样的,现在觉得是思考方式不同,所得结果也会有所不同。

响应式网页设计不仅仅是响应不同类型的设备,而且需要响应不同用户的需求。

自己的理解,有不对的地方,欢迎指正~

时间: 2024-08-06 08:05:08

说说响应式网页设计的相关文章

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

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

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

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

响应式网页设计

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

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

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

响应式网页设计中的图片处理

响应式网页设计,是一种正在流行的网页开发思想,它是利用灵活可变的栅格系统,令网页的显示模式可以根据访问设备的屏幕尺寸规格而进行自适应.预计2015年的时候,移动端的用户数量将会从目前的8亿,增长到19亿,而这也意味着目前我们为桌面浏览器而设计的网页,将会在他们的手机和平板上呈现出非常糟糕的使用体验. 但是随着实际应用状况的改变,响应式网页设计还是会出现一系列复杂的并发症.本文余下的部分,就是详细阐述如何在响应式网页中安置和处理多媒体元素,诸如图片和视频,最终的目的是帮你做出一个靠谱的网站,能让这

响应式网页设计简单入门

文章表达的中心思想就是最后的那句引用"最好的设计是尽量少的设计".最重要的是我意识到平时我们都忽略了一个常识:一张未经加工的原始HTML文档就已经是响应式的了,根本不用什么CSS media属性或者指定任何样式. 通过查看HTML代码发现作者果然留下了一些信息,于是在twitter上找到他表达了我对他的膜拜之情以及想把如此精华的文章翻译成中文的意愿.作者很爽快地答应了23333~~(X___X)~~. 于是就有了同样奇葩的中文版本:妈逼的网站,原文的精髓可能由于我自身对这类表达的驾驭的

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

作为一名码农,在项目开发过程中经常会涉及到项目的需求变更,变更的理由也是多种多样,总结而来分为外部和内部,从外部讲,例如:为了顺应某行业新的工作操作规范,甲方要求现有项目在工作流程环节上进行局部功能的变更:从内部讲,通过对市场环境的不间断调研和数据分析,公司产品在同类产品竞争中处于不利地位,市场份额日渐缩小,那么我们的产品设计人员会积极行动起来对产品的整个定位和新业务展开新的思考以寻求更加稳健的创新突破口,这就会对项目产生一定的需求变更. 此图是从CSDN社区截取下的,我相信很多看到这个问题的筒

响应式网页设计:web产品RWD概念

RWD(Responsive Web Design) 可称为自适应网页设计.响应式网页设计.响应式网页设计等等,是一种可以让网页的内容可以随着不同的装置的宽度来调整画面呈现的技术,让使用者可以不需要透过缩放的方式来浏览网页,大大的提升画面的可浏览性及使用界面的亲和度:然而这对于行动商务越来越受到重视的现今来说,随之也越来越倍受重视. 近几年,随着行动装置(智慧型手机.平板)的普及,以及行动上网服务的使用率越来越高,传统网页的标准已经无法符合这些装置的需求来呈现了,尤其是以flash制作的动画,受

浅谈响应式网页设计

技术的革新带动了设计行业的的迅猛发展,这使得设计师和开发者有了更广阔的的探索天地.而网页设计也越发不再那么循规蹈矩,许多团队和公司都做了很多思考和创意.所以在我们适应着现代设计潮流的同时,不妨也来看看现阶段网页设计大致的趋势和风格吧.我不敢大言不惭的说这就是当下网页设计的趋势,这只是本人对当下网页设计做出的一些小总结.希望这样的归类总结能给你带来更多的思路和想法. 响应式网页设计 现在越来越多用户都拥有多种终端:台式机,笔记本,平板电脑,手机,能够适应不同尺寸显示屏的网页是现在的潮流,甚至是未来

响应式网页设计的20个误区

响应式网页已经成为当下比较主流的设计形式,似乎每一个人都在谈论,但实际上并不是每一个人都真的懂得.以下总结了在进行响应式网页设计时的20个误区,你可以看看自身是否存在入其中所说的问题. 1.响应式网页设计 = 移动端优化 是的,当下确实移动互联网发展迅猛,所以响应式网页设计一直被当作重点,而且在概念上是主角.但它也不是唯一,因为你还要考虑到设备.如:平板和电视.响应式网页的真正目的是使网页适应任何屏幕,任意比例和宽度的互联网产品.这些远远超出了手机的范畴. 2.尽可能在多样的设备上测试 在设计领