读书频道 > web开发 > 其他综合 > 学习响应式设计
1.1 一点儿基础
2015-05-08 13:45:13     我来说两句 
收藏    我要投稿   

本文所属图书 > 学习响应式设计

本书分为四部分,全面介绍响应式Web 设计策略与技术,引领大家掌握从项目立项到网站上线的响应式设计工作流程。第一部分介绍响应式设计及其与其他网页设计方法的区别。第二部分概述构建响应式站点的基础知识、必  立即去当当网订购
如果你拿起本书,是因为你听说过响应式设计,但还不是很明白它到底是什么,本节将帮助你了解响应式设计的基本知识。
 
即使你有一定的响应式设计经验,也可能觉得很难用通俗的语言向别人解释它。本节将给你一个更好的主意,告诉你如何向用户、客户、非技术团队成员或你的妈妈(她很好奇,想知道你每天在工作中都做些什么)解释响应式设计。
 
总的来说,响应式设计是一种方法,使网站可以在任何类型的设备和任何尺寸的屏幕上(从最小的手机直至最宽的桌面显示器)轻松浏览和使用。最简单的解释方式是比较响应式网站与非响应式网站,并看看这两种类型的网站在智能手机上的浏览效果。
 
想象你正使用你的智能手机浏览一个固定宽度的网站,即一个被设计成总是以一个固定的宽度(比如960 个像素)来显示的站点。你将看到整个网站就如同它在你的桌面显示器上显现的一样,但它最初以一个微小的尺寸进行显示,以适应屏幕。你频繁地放大和缩小它,以便阅读文字和浏览网站,如图1-1 所示。这需要许多额外的操作。
 
 
有些网站有一个移动版站点,独立于常规的桌面网站。在你的智能手机上浏览此类网站时,它以全尺寸显示(不必进行缩放),但你时常会发现它与你在桌面显示器上浏览的同一网站有很大不同——通常缺失很多内容,网站拥有者因此可以减少维护多个版本网站所产生的额外工作。
 
此外移动版网站通常是为一个特定尺寸的设备(如iPhone)制作的,因此如果你有一个不同的设备,该网站可能就无法很好地适应屏幕了。单独的移动网站通常是为某一大小的设备所优化的,但是市场上有很多不同的设备,构建一个只能工作于一种设备上的移动网站可能意味着抛弃了所有使用其他不同设备的用户。举一个例子,宜家(IKEA)有一个单独的移动网站,是为某一尺寸的手机优化适配的。在
 
 
图1-2: 宜家桌面站点(上方)与你在iPad 上(左下)所看到的是一样的,而iPhone 则显示一个特别的移动网站(右下)三个屏幕截图都是按比例缩小的,你可以比较在不同尺寸屏幕上所看到的内容。在iPhone上浏览的是移动版网站,只显示几个导航链接,但它们与桌面网站上的链接有相似的尺寸大小。而在iPad 上,你浏览的是桌面网站而不是移动版网站,所有内容都被缩得非常小以适应小屏幕。你必须做许多缩放操作来浏览该网站。
 
宜家公司做了大量工作来创建一个良好的移动网站,但如果你的设备是一台平板电脑,你没法使用它,也不会获得满意的体验。如果宜家有一个响应式网站,就能够保证人们使用任何尺寸的设备都能获得一个合适的界面。
 
采用响应式设计时,网站仅有一个版本,因此你能浏览全部的内容,且网站会自己重新排列以完美地适配任何尺寸的屏幕,并具有全尺寸文本,那样你就无需进行缩放操作了,如图1-3 所示。
 
 
 
这里有很多技术细节(稍后我们将讨论),但从用户的角度来说,描述一个响应式网站的关键是网页内容可以自动改变大小和移动位置以适配显示它们的屏幕。
点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:概述
下一篇:1.2.1 固定宽度设计
相关文章
图文推荐
3.2 Windows 7设置
3.1 DNS解析
2.3 HTTP协议
2.2 TCP/IP协议与So
排行
热门
文章
下载
读书

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做最好的IT技术学习网站