美文网首页
响应式web设计

响应式web设计

作者: 我不是吴绮雯 | 来源:发表于2018-03-09 11:06 被阅读0次

    1.名词解释(注明:名词摘自教科书第一章,释义来源于百度)

    什么是响应式web设计(搜索自搜狗)

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

    ②.响应式Web设计的优点:可以兼容所有尺寸的屏幕,随着手持设备(手机)屏幕尺寸繁多,也有很好的兼容性;而且开发一次,pc版和触屏版,手机版融合为一;

    ③.响应式Web设计的缺点:对前端工程师要求比较高,它的屏幕兼容要求前端工程师对各种浏览器差异性了解比较多,对于大数据展示的门户站点,如果用同一页面,即时浏览器不崩溃,在手机上一个页面,很难滑到最底部,带来操作是十分不方便的,触屏版和手机版对优质信息展示不足。

    ④.综合优缺点:响应式Web设计在企业站点,微型或者小站还是可以用的,对于大中型站点不合适(尤其大信息量展示的)。

    RWD

    响应式网站设计(简称RWD)是一种新的网站设计模式,以此构建的网站可自动适应不同的访问设备(从桌面电脑、平板电脑到智能手机),方便用户阅读和导航浏览,减少用户的放大/缩小/滑动操作,从而提供完整而友好的用户体验。

    响应式网站设计有三个关键组成部分:1. media query; 2. 流动网格;3. 灵活缩放的图片。

    基于RWD而设计的网站利用CSS3 media queries规则来自动适应不同访问设备的屏幕尺寸和显示要求。而流动网格采用页面元素大小的相对单位(百分比或EM),而非传统设计使用的绝对单位(像素或点数),以确定页面各组成元素的大小。最后,图片大小也是采用相对单位而灵活缩放,不至于在小屏幕的移动设备上超出显示区域。

    HTML5

    万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改

    CSS3

    CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块 。CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新,因此通过采用模块方法,CSS3规范里的元素能以不同速度向前发展,因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时问支持不同特性,这也让跨浏览器开发变得复杂

    javascript

    JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

    Sublime Text

    Sublime Text 是一个代码编辑器(Sublime Text 2是收费软件,但可以无限期试用),也是HTML和散文先进的文本编辑器。Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来,它最初被设计为一个具有丰富扩展功能的Vim。Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和工具栏。Sublime Text 的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等。Sublime Text 是一个跨平台的编辑器,同时支持Windows、Linux、Mac OS X等操作系统。

    Vim

    是一个类似于Vi的著名的功能强大、高度可定制的文本编辑器,在Vi的基础上改进和增加了很多特性。 VIM是自由软件。Vim普遍被推崇为类Vi编辑器中最好的一个,事实上真正的劲敌来自Emacs的不同变体。1999 年Emacs被选为Linuxworld文本编辑分类的优胜者,Vim屈居第二。但在2000年2月Vim赢得了Slashdot Beanie的最佳开放源代码文本编辑器大奖,又将Emacs推至二线, 总的来看, Vim和Emacs在文本编辑方面都是非常优秀的

    Microsoft Visual Studio

    Microsoft Visual Studio(简称VS)是美国微软公司的开发工具包系列产品。VS是一个基本完整的开发工具集,它包括了整个软件生命周期中所需要的大部分工具,如UML工具、代码管控工具、集成开发环境(IDE)等等。所写的目标代码适用于微软支持的所有平台,包括Microsoft Windows、Windows Mobile、Windows CE、.NET Framework、.NET Compact Framework和Microsoft Silverlight 及Windows Phone。Visual Studio是目前最流行的Windows平台应用程序的集成开发环境。最新版本为 Visual Studio 2017 版本,基于.NET Framework 4.5.2 。

    notepad

    notepad(记事本)是代码编辑器或WINDOWS中的小程序,用于文本编辑,在文字编辑方面与Windows写字板功能相当。是一款开源、小巧、免费的纯文本编辑器。Notepad内置支持多达 27 种语法高亮度显示(囊括各种常见的源代码、脚本,值得一提的是,完美支持 .nfo 文件查看),也支持自定义语言。

    断点

    所谓“断点”,就是某个宽度临界点,跨过这个点布局就会发生显著变化。断点应该由内容和设计本身决定。(注明:释义来源于书本)

    W3C

    万维网联盟:万维网联盟创建于1994年,是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止,W3C已发布了200多项影响深远的Web技术标准及实施指南,如广为业界采用的超文本标记语言(标准通用标记语言下的一个应用)、可扩展标记语言(标准通用标记语言下的一个子集)以及帮助残障人士有效获得Web内容的信息无障碍指南(WCAG)等,有效促进了Web技术的互相兼容,对互联网技术的发展和应用起到了基础性和根本性的支撑作用。

    2.为何需要"响应式网页设计"(图片来自于市场调查机构 statcounter )

    StatCounter-comparison-ww-monthly-201702-201802.png StatCounter-resolution-ww-monthly-201702-201802.png

    因为如今手机所占的市场份额较大甚至超过了台式电脑,虽然平板电脑所占比例较小但仍然又庞大的用户群,再加上不同屏幕分辨率的差别越来越大,为了更好的适应市场,以及满足用户更高的使用要求,响应式web设计十分的必要。

    3.

    ①采用了响应式Web设计:http://www.w-gallery.com.tw/zh-tw

    ②无采用(笔者认为):http://588ku.com/

    4.RWD的三项组成科技(结果来源于百度)

    计数器、留言版、聊天室和论坛BBS、管理信息系统

    5.RWD和前後端的关系(结果来源于百度)

    Web前端:

    ①. 精通HTML,能够书写语义合理,结构清晰,易维护的HTML结构。

    ②. 精通CSS,能够还原视觉设计,并兼容业界承认的主流浏览器。

    ③. 熟悉JavaScript,了解ECMAScript基础内容,掌握1~2种js框架,如JQuery。

    ④. 对常见的浏览器兼容问题有清晰的理解,并有可靠的解决方案。

    ⑤. 对性能有一定的要求,了解yahoo的性能优化建议,并可以在项目中有效实施。

    Web后端:

    ①. 精通jsp,servlet,java bean,JMS,EJB,Jdbc,Flex开发,或者对相关的工具、类库以及框架非常熟悉,如Velocity,Spring,Hibernate,iBatis,OSGI等,对Web开发的模式有较深的理解。

    ②. 熟练使用oracle、sqlserver、mysql等常用的数据库系统,对数据库有较强的设计能力。

    ③. 熟悉maven项目配置管理工具,熟悉tomcat、jboss等应用服务器,同时对在高并发处理情况下的负载调优有相关经验者优先考虑。

    ④. 精通面向对象分析和设计技术,包括设计模式、UML建模等。

    ⑤. 熟悉网络编程,具有设计和开发对外API接口经验和能力,同时具备跨平台的API规范设计以及API高效调用设计能力。

    5(文段来源于教科书P2)

    “响应式web设计”这个名字是Ethan Marcotte在2010年发明的。当时,他在A List Apart上写了一篇文章(http://www.alistapart.com/articles/responsive-web-design/),这篇文章综合运用了三种已有技术(弹性网格布局、弹性图片/媒体、媒体查询)实现了一个解决方案,就叫“响应式Webs设计”

    相关文章

      网友评论

          本文标题:响应式web设计

          本文链接:https://www.haomeiwen.com/subject/ckusfftx.html