名词解释
- 响应式Web设计：所谓响应式Web设计（Responsive Web Design.），就是网页内容会随着访问它的视口以及设备的不同而呈现不同的样式。
- HTML：HTML（Hyper Text Markup Language）中文译为“超文本标记语言”，主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。
- WWW：WWW（World Wide Web）中文译为“万维网”，是Internet提供的一种网页浏览服务。
- URL：Uniform Resource Locator，中文译为“统一资源定位符”，URL其实就是Web地址，俗称“网址”。
- DNS：DNS是域名解析系统。
- HTTP：HTTP中文译为“超文本传输协议”，是一种详细规定了浏览器和万维网服务器之间互相通信的规则。
- Web：Web通常指互联网的使用环境，但对于网站制作者来说，它是一系列技术的复合总称，通常称为“网页”。
-
JavaScript：是Web页面中的一种脚本语言，它可以将静态页面转变成动态页面（在网站建设中用于为页面添加动态效果）。
（以上名词解释大部分来自RWD教科书）
谁提出了“响应式Web设计”？
这个名字是Ethan Marcotte在2010年发明的，当时，他在A List Apart上写了一篇文章（http://www.alistapart.com/articles/responsive-web-design/），这篇文章综合运用了弹性网格布局、弹性图片/媒体、媒体查询这三种技术实现了一个解决方案。
为什么我们需要响应式设计？
Desktop vs Mobile vs Tablet Market Share Worldwide - February 2018
Desktop vs Mobile vs Tablet Market Share Worldwide Feb 2017 - Feb 2018
Desktop vs Mobile vs Tablet Market Share Worldwide Jan - Dec 2016
-
如图所见，从2016年十月中下旬开始，全球手机的市场占有率开始反超台式电脑的市场占有率，从那以后全球手机的市场占有率逐渐占据上风，而台式电脑的市场占有率则是逐渐降低，到现在趋于一个平稳的值，而平板的市场占有率一直都处于较低处，十分平稳，由这几个数据图我们可以得知，随着时代的发展，手机用户的数量不断增多，现在使用手机已经是主流了，而且大多数人都是用手机看网页了（因为方便又快捷），所以这时就需要响应式设计了，响应式设计可以让网页内容随着访问视口及设备的变化而变化，让用户能有更好的观看体验和网页体验。
-
现在也有很多网站使用了响应式设计，例如：
华东师范大学（http://www.ecnu.edu.cn/）
手机看时，它是这样的：
手机所看到的华东师范大学的网站版面
- 版面十分整洁了，不用自己拖动版面~
网页版是这样的：
电脑所看到的网站版面
- 当然也有不使用响应式设计的网站，例如：
bilibili弹幕网（https://www.bilibili.com/）
用手机看的话，版面是这样的：
手机会看到的画面
- 如果没有响应式设计的话，用户在手机查看网页的时候就会十分的不方便（但是这个网站是有手机APP的，这个就另说了）
关于RWD的三项组成科技
-
结构标准：用于对网页元素进行整理和分类，主要包括两部分：XML和HTML
-
表现标准：用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
-
行为标准：是指网页模型的定义以及交互的编写，主要包括两部分：DOM和ECMA Script
RWD与前后端的关系
-
前端：前端对于网站来说，通常是指，网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。
（引用：https://baike.so.com/doc/6484003-6697709.html） -
后端：后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。
-
前端开发人员：前端工程师、平面设计师，需要学好CSS，学习JavaScript的基本语法，最好能了解Unix和Linux的基本知识。
-
后端开发人员：后端工程师，会写Java代码，会写SQL语句，能做简单的数据库设计，会Spring和iBatis，懂一些设计模式等。
-
最后，由前端以及后端开发人员所需具备的能力来看，想要设计优秀的响应式网页，是和能力优异的前后端开发人员是密不可分的，可以说是RWD的一个很重要的部分了。
以上是我的感想以及我所理解的响应式网页设计，谢谢♪(･ω･)ﾉ
网友评论