响应式网页设计

2018-03-13 本文已影响0人 Chenx_7611

一、名词解释

响应式Web设计：综合运用弹性网格布局、弹性图片/媒体、媒体查询实现的网页内容会随着视口及设备的不同呈现不同的样式。于2010年Ethan Marcotte发明，在A LIst Apart上提出。
RWD（Responsive Web Design）为响应式设计的英文解释。
CCS（Cascading Style Sheets）：层叠样式表，是一种用来表现HTML（标准通用标记语言）的一个应用或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。CSS3为CSS的升级版本。
视口(viewport)：浏览器中用于呈现网页的区域，视口通常并不等于屏幕大小，特别是可以缩放浏览器窗口的情况下。
前端（front-end）：对于网站来说通常是指网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。
-后端（back-end）：指网站的逻辑部分，主要涉及数据库，动态语言如PHP、ASP、JSP等。
HTML5：万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言的第五次重大修改。

二、为什么需要“响应式网页设计”？

全球桌面与移动与平板电脑市场份额

全球屏幕分辨率统计表

图片来源市场调查机构statcounter
戳这里更多调查图表可见市场调查机构statcounter

通过以上两张图标可以清晰的看出全球的智能手机用户的数量已超过PC端的用户数量，用1366x768的屏幕分辨率的设备（电脑）的趋势在不断下降，反之用360x640的屏幕分辨率的设备（手机）的趋势在不断攀升。由此可见如今越来越多的人使用手机上网，但利用电脑的人也不在少数，因此，想要实现的网页内容在视口及设备不同的情况下应用，响应式Web设计无疑是最佳选择。

三、响应式设计例子

天猫

百度百科

由以上两张图片我们可以看出天猫并未使用响应式网页设计，而百度百科则使用了响应式网页设计。

四、RWD的三项科技组成

弹性网格布局（fluid grid）：图片的尺寸可以被自动调整，页面布局再不会被破坏。无论用户切换设备的屏幕定向方式，还是从台式机屏幕转到iPad上浏览，页面都会真正的富有弹性。
弹性图片（flexible image）：不仅能同比的缩放图片，还要在小设备上降低图片自身的分辨率。其原理为rwd-images.js会检测当前设备的屏幕分辨率，如果是大屏幕设备，则向页面head部分中添加BASE标记，并将后续的图片、脚本和样式表加载请求定向到一个虚拟路径"/rwd-router"。当这些请求到达服务器端，.htacces文件会决定这些请求所需要的是原始图片还是小尺寸的"响应式图片"，并进行相应的反馈输出。对于小屏幕的移动设备，原始尺寸的大图片永远不会被用到。
媒体查询（media queries）：媒体查询是界面为了适应不同屏幕大小而存在的。媒体查询是评估 True 或 False 的一种表达。如果为 True，则继续使用样式表。如果为 False，则不能使用样式表。这种简单逻辑能够更灵活地对特定的设计场景使用自定义的显示规则。媒体查询包含一个媒体类型，后跟一个或多个检查特定条件（如最小的屏幕宽度）的表达式。

五、RWD与前后端：

在软件架构和程序设计领域，前端是软件系统中直接和用户交互的部分，而后端控制着软件的输出。将软件分为前端和后端是一种将软件不同功能的部分相互分离的抽象。

前端：用互联网来做比喻,凡是通过浏览器到用户端计算机的统称为前端技术，前端三要素包括HTML+CSS+JavaScript，前端技术包括JavaScript、ActionScript、CSS、xHTML等“传统”技术与Adobe AIR、Google Gears,以及概念性较强的交互式设计,艺术性较强的视觉设计等等。Web前端开发要为网站上提供的产品和服务实现一流的Web界面，优化代码并保持良好兼容性。在前端开发人员需要熟练运用ES6新增语法，利用AJAX技术与后台进行数据交互、熟练使用JQuery语法、封装和发布JQuery插件等技术操作。
后端：后端更多的是与数据库进行交互以处理相应的业务逻辑，需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。要求后端开发人员会写Java代码，会写SQL语句，能做简单的数据库设计，会Spring和iBatis，懂一些设计模式等。
前端就是前台显示，比如打开一个网站你看到的就是前端。后端就是网站信息管理（信息或新闻发布、修改、删除）俗称后台管理。两者相辅相成，共同完成一个网页的应用与呈现。
Marcotte于2010年在A List Apart上发表的关于响应式web设计原文