响应式web设计(RWD)
- 是在开发和设计网站过程中产生的一种方式,它的目的是让内容布局能随用户使用显示器的不同而变化。再明确点说,这种设计概念,就是让原本1292像素宽,4栏的内容,能够很好地显示在1025像素宽的用户屏幕上,同时还能自动简化成2栏。这种特殊的设计形式就被称为“响应式web设计”。
HTML5
- 万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。
CSS3(层叠样式表3级)
- CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。
JavaScript
- JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。
SVG(可缩放矢量图形)
- 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维图形的一种图形格式。它由万维网联盟制定,是一个开放标准。
statcounter 的数据所制的图和表
采用了响应式Web设计
无采用响应式web设计
RWD的三项组成科技
media query:允许网页根据访问站点设备的特点而使用不同 CSS 样式规则,最常用的是浏览器的宽度。
流动网格:一个被显式声明为网格的容器中,其所有子元素自动被认定为网格单元格,而这些网格单元格在没有被显式设置明确位置时,浏览器将会自动为这些网格单元格的位置进行计算,按照先后顺序从左向右,或从上到下排列。在这里把这种方式称之为网格的流动。
灵活缩放的图片:相对单位调整大小,以防止它们显示在包含它们的元素外面。
RWD和前後端的关系
RWD 是前后端的统一,后端来输出不同的内容,前段来按需加载资源。
教科书及RWD一词提出人Marcotte(2010)的网页连结
“响应式web设计”这个名字是Ethan Marcotte在2010年发明的。当时,他在A List Apart上写了一篇文章(http://www.alistapart.com/articles/responsive-web-design/),这篇文章综合运用了三种已有技术(弹性网格布局、弹性图片/媒体、媒体查询)实现了一个解决方案,就叫做“响应式web设计”。