响应式网页设计

2018-03-11  本文已影响0人  K张佳佳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的三项组成科技

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设计应运而生。

上一篇 下一篇

猜你喜欢

热点阅读