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

响应式网页设计

作者: K张佳佳0 | 来源:发表于2018-03-11 15:01 被阅读0次

响应式web设计(Responsive Web Design)

简单来说,就是网页内容会随着访问他的视口及设备的不同而呈现不同的样式。
响应式web设计基于CSS3和HTML,利用弹性网络布局,弹性图片/媒体,媒体查询等技术实现。

Web 标准

Web 标准不是某一个标准,而是由W3C和其他标准化组织制定的一系列标准的集合。包括我们所熟悉的HTML,XHTML,CSS,JabaScript等待。

HTML和XHTML

中文译为超文本标记语言,主要是通过HTML标记对网页中的文本,图片,声音等内容进行描述。
XHTML是更严谨纯净的HTML版本,目的是为了实现HTML向XML过渡。

CSS

通常称为CSS样式表,主要用于设置HTML页面的文本内容(字体,大小,对齐方式等),图片的外形(宽高,边框样式,边距等)以及版面的布局等外观显示样式。

JavaScript

JavaScript是Web页面中的一种脚本语言,通过JavaScript可以将静态页面转变成支持用户交互并响应相应事件的动态页面。在网站建设中,JavaScript用于为页面添加动态效果。

为什么需要响应式web设计

全球桌面与移动与平板电脑的市场份额
全球市场屏幕分辨率
中国市场的屏幕分辨率

因此综合以上数据,在智能终端领域,浏览网页以不仅仅局限于电脑桌面。屏幕的分辨率也不仅仅局限于1920×1080,于是需要响应式设计进行调节。

举例

http://www.sysu.edu.cn/2012/cn/index.htm
采用了响应式设计

中山大学官网
iPhone界面
794×670的任意界面
http://www.xhsysu.edu.cn/
未采用响应式设计
中山大学新华学院官网
1186×860的任意界面

RWD的三项组成科技

  • HTML :对网页元素进行整理和分类,相当于一个屋子的结构
  • CSS :设置网页元素的版式,颜色,大小等外观样式,相当于一个屋子的外形
  • JavaScript:网页模型的定义及交互的编写,相当于房间内部设备,让房子具有功能性。

RWD与前后端的关系

前端指在访客到数据库/云端之间,后端指在平面设计至计算机科学之间
Web前端: 我们这里所说的前端泛指Web前端,也就是在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。
Web后端:后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。

引用Ethan Marcotte

https://alistapart.com/article/responsive-web-design

“响应式设计”这个名字是Ethan Marcotte 在2010年发明的。当时,他在A LIst Apart上写了一篇文章(http:// www.alistapart.com/articles/responsive-web-design),这篇文章综合运用了三种已有技术(弹性网格布局,弹性图片/媒体,媒体查询)实现了一个解决方案,就叫“响应式web设计”。如今看来,随着智能终端设备的应用,浏览网页已经不再仅仅局限于PC机了。移动手机、PAD等智能终端越来越受欢迎。于是为了达到一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本,响应式web设计应运而生。

相关文章

  • 交互细节丨什么是响应式网页设计,这种设计有何优缺点

    1. 什么是响应式网页设计? 1.1 响应式网页设计的概念 响应式网页(Responsive Web Design...

  • 响应式网页设计

    名词解释 1.什么是响应式网页设计 响应式网页设计或称自适应网页设计、回应式网页设计、对应式网页设计。 是一种网页...

  • 响应式网页设计

    一、介绍 什么是响应式网页设计? 响应式网页设计使您的网页在所有设备上都很好看。 响应式网页设计仅使用HTML和C...

  • 九、HTML5响应式布局

    @(HTML5)[相应式布局] [TOC] 九、HTML5响应式布局 什么是响应式网页设计(布局) 响应式网页设计...

  • 响应式网页设计

    名词解释 响应式Web设计(Responsive Web design): 响应式网页设计(RWD)是一种网页设计...

  • 响应式网页设计

    一.名词解释 1.响应式网页设计(Responsive Web design(RWD):“响应式网页设计”这个名字...

  • 响应式网页设计

    名词解释 响应式网页设计 Responsive Web design(RWD) “响应式网页设计”这个名字是Eth...

  • 响应式网页设计

    什么是响应式网页设计? 响应式网页设计(RWD)就是网页内容会随着访问他的视口及设备的不同而呈现不同的样式 响应式...

  • 响应式网页设计

    响应式网页设计,亦称“响应式Web设计”,其简称为RWD。所谓的响应式Web设计,是指“网页内容会随着访问它的视口...

  • 响应式网页设计

    响应式网页设计 “响应式网页设计”这个名字是Ethan Marcotte在2010发明的,即Responsive ...

网友评论

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

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