美文网首页
响应式网页设计

响应式网页设计

作者: N莫熙彤 | 来源:发表于2018-03-10 17:05 被阅读0次

    名词解释(来源于网络)

    HTML5

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

    CSS3

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

    RWD

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

    JavaScript

    1.是一种解释性脚本语言(代码不进行预编译)。
    2.主要用来向HTML(标准通用标记语言下的一个应用)页面添加交互行为。
    3.可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。
    4.跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行(如Windows、Linux、Mac、Android、iOS等)。

    视口(viewport)

    在 Windows的作图函数中,涉及逻辑坐标到设备坐标的转换。这里提到的窗口(window)、视口(viewport)是对应的概念。视口是与设备相关的一个矩形区域,坐标单位是与设备相关的“像素”,大多数情况下,视口与客户区相同。窗口的坐标是逻辑坐标,与设备无关,可能是像素、毫米或者英寸。窗口坐标的原点与视口坐标的原点始终对应于同一点。对于同一个图形,用窗口坐标系统表达的该区域的长和宽与视口的坐标系统表达的长和宽是不同的。二者就定义了这两个坐标系统的比例关系。程序作图时,使用的坐标总是是窗口坐标。而实际的显示或输出设备却各有自己的坐标。

    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

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

    Visual Studio

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

    Notepad

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

    max-width

    max-width,JavaScript中的语法,用于定义元素的最大宽度。(规则:要保证所有图片最大显示为其自身100%,即最大只可以显示为自身那么大)

    为何需要“响应式网页设计”?(图中数据来自gs.statcounter.com)

    由此图可以看出,移动用户总量总体处于上升阶段,越来越多的人选择使用移动客户端来登录网站、使用网络。


    微信图片_20180310154335.png

    由此图可以看出,不同设备间的分辨率相差明显,且范围较广。


    微信图片_20180310154350.png

    综上,在移动设备的不断发展以及屏幕分辨率的各种差别之下,网页设计者们应该以更舒适的网页设计去匹配不同的机型,以满足不同用户使用网站时的舒适度以及便捷度,为用户提供更好地体验感。

    有无使用响应式Web设计的例子(内容来自网络)

    有使用的例子——
    阿迪达斯官网https://www.adidas.com.cn/campaign/sports_women?utm_source=Baidu&utm_medium=SEM&utm_term=%E9%98%BF%E8%BF%AA%E8%BE%BE%E6%96%AF%E5%AE%98%E7%BD%91%E4%B8%AD%E6%96%87%E7%BD%91%E7%AB%99&utm_campaign=adidas%5FWOMEN&utm_content=18Xcat%2DWomen%2DBrand%28P%29

    无使用的例子——
    135编辑器http://www.135editor.com/

    RWD的三项组成科技(解释来源于网络)

    流动网格(Fluid Grids),灵活的图片(Flexible Images)和媒体查询(Media Queries)是对于响应式网页设计的三种技术元素,但它们也是需要不同想法的方式。

    流式网格:

    概念要求页面元素使用相对单位如百分比或字体排印学调整大小,而不是绝对的单位如像素或点;

    灵活的图片:

    也以相对单位调整大小(最大到 100%),以防止它们显示在包含它们的元素外面;

    媒体查询:

    允许网页根据访问站点设备的特点而使用不同 CSS 样式规则,最常用的是浏览器的宽度。

    RWD和前后端的关系(内容来自网络)

    与前端的关系

    前端对于网站来说,通常是指,网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括基本的HTML和CSS以及JavaScript/ajax,现在最新的高级版本HTML5、CSS3,以及SVG等。

    与后端的关系

    对应jsp、javaBean 、dao层、action层和service层的业务逻辑代码。(包括数据库)

    教科书及RWD一词提出人Marcotte的文章(内容来自课本)

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

    “然而,在网上工作则完全是另一回事。我们的工作被定义为短暂的,常常在一两年内完善或取代。不一致的窗口宽度,屏幕分辨率,用户偏好以及我们用户安装的字体只是我们在发布我们的工作时谈判的一些无形资产,多年来,我们已经变得非常擅长。但景观正在转移,可能比我们想象的要快。移动浏览预计将在三到五年内超过基于桌面的访问。三种主流视频游戏控制台中的两种具有网络浏览器(其中一种非常出色)。我们正在设计鼠标和键盘,T9键盘,手持游戏控制器,触摸界面。总之,我们面临比以往更多的设备,输入模式和浏览器。”(来自Marcotte的文章)

    相关文章

      网友评论

          本文标题:响应式网页设计

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