响应式网页设计

响应式网页设计

响应式网页设计（图片来源于网络）

• 由Ethan Marcotee 在2010年发明的。
  大家可前往他的文章阅读更多内容。
• 英文：Responsive Web design（简称RWD）

响应式网站设计(Responsive Web design)的理念是：
页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

响应式网页设计（Responsive Web Design，通常缩写为 RWD），又称为自适应网页设计、回应式网页设计。是一种现代网页设计方法，该设计基于 CSS3 的媒介查询（Media Query）特性使得网页适应不同设备，即根据设备的分辨率和缩放自动重新布局，同时减少缩放、平移和滚动。

• 必要性
  响应式网页设计就是为了让网站能够兼容多个终端。为各个终端制作终极版本。
  为什么响应式设计如此必要呢？从statcounter的数据我们可以得到答案：
  
  由数据可看出手机终端的持有率已经在电脑终端之上，且呈上升状态。
• 案例
  我们也看看哪些网站应用了响应式
  
  

  百度电脑终端
  
  
  百度手机终端
  
  百度出应用了响应式的百度电脑与手机呈现的内容截然不同。

那么没应用RWD的网站又有哪些呢？

中山大学电脑终端

中山大学手机终端

中山大学的官网没有应用响应式设计。
可以看出没有应用RWD的中山大学官网在手机就显得非常不方便。

---

RWD的三项组成科技

• 流式网格：概念要求页面元素使用相对单位如百分比或字体排印学调整大小，而不是绝对的单位如像素或点；

• 灵活的图片：也以相对单位调整大小（最大到 100%），以防止它们显示在包含它们的元素外面；

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

RWD和前後端的关系

• 前端
  
  

  前端（图片来源于网络）

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

HTML、CSS、JavaScript
这三个是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。

• HTML

指的是超文本标记语言 (Hyper Text Markup Language)，这个也是我们网页最常用普通的语言了，经历了多个版本的发展，已经发展到5.0版了，得力于W3C建立的标准和规范，已普遍升级到了XHTML，XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）， XHTML 于2000年的1月26日成为 W3C 标准，是更严格更纯净的 HTML 代码，XHTML 的目标是取代 HTML。XHTML 与 HTML 4.01 几乎是相同的，XHTML 是作为一种 XML 应用被重新定义的 HTML，是一个 W3C 标准。W3C 将 XHTML 定义为最新的HTML版本。所有新的浏览器都支持 XHTML。^[1]

• CSS

级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。^[2]

• Javascript

是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。　^[3]

---

后端

后端就是网站的逻辑部分，主要涉及数据库，动态语言如PHP、ASP、JSP等
后台一般指的是管理员操作模块，包括对网站内容的更新、注册会员管理等等，是网站的一个子模块

后台应该是管理网站的，一般叫网站管理后台，比如发文章啊，查看浏览数据啊等等，对应的也会有网站前台，即访客能看到的页面，对了，后台肯定不能对访客开放的，没人愿意让访客来修改自己网站文章的。一般呢，你输入http://www.xxx.com看到的就是网站前台，有些网站呢，你输入http://www.xxx.com/admin/ 就能进入到那个网站的管理后台页面了，但是需要输入账户密码。
(知乎作者：蒙奇D撸码客)

前端后端（图片来源于网络）

可以看出前端是呈现给用户的东西，后端是程序员开发的地方。响应式网页设计所要做的就是通过后端来使前端在各个终端上切换自如。（个人了解）