响应式网页设计

作者: 滢_ | 来源:发表于2018-03-08 17:47 被阅读0次

Ethan Marcotte是一名独立的网页设计师，在2010年提出响应式网页设计，他也写了关于《响应式网页设计》的书，讲述了关于如何制作满足用户需求的网页

响应式网页设计（Responsive Web Design 简称RWD）：响应式界面能够适应不同的设备，是可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。

我认为响应式网页设计是互联网迅速发展时代的必要产物

2016年中国屏幕分辨率趋势图

首先看占比最多的为“其他”分辨率，因为如今随着科技的迅速发展，不同的设备的分辨率不同，造成分辨率的数值无法统一，因此说，只有通过响应式Web设计才会针对任意设备的网页内容进行相对应的布局，才能真正脱离先前的传统布局方式。
再看人们用1366x768的屏幕分辨率的设备（即电脑）的趋势在不断下降，而用360x640的屏幕分辨率的设备（即手机）的趋势在不断上升，通过这个的比较，也能看出如今人们利用手机来上网的趋势在不断攀升，但同时利用电脑的人数也不能被忽视，因此，如果想要通过写一些较轻量的代码就能在不同设备中进行应用的话，响应式Web设计则是最佳选择。

最近12个月的世界屏幕分辨率趋势图
从世界屏幕分辨率趋势图也不难看出人们使用手机上网的趋势不断攀升，因此不管是中国还是世界各个地区，为了满足各种用户的体验效果，使用响应式网页设计是一大趋势。

采用了RWD设计的例子：淘宝网

淘宝网（响应式网页设计）.png
- 没有采用RWD设计的例子：中山大学南方学院官网
  中山大学南方学院官网（没用响应式网页设计）.png

从这两个例子比较进行分析，则能看出运用了响应式网页设计与没有用响应式网页设计的区别所在，运用了RWD设计的则在不同分辨率中进行任意变化，有利于满足电脑与手机等用户对该软件的满意程度，而没有运用RWD设计的则会对用户的浏览进行一定的影响。

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

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

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