响应式网站设计(简称RWD)是一种新的网站设计模式,以此构建的网站可自动适应不同的访问设备(从桌面电脑、平板电脑到智能手机),方便用户阅读和导航浏览,减少用户的放大/缩小/滑动操作,从而提供完整而友好的用户体验。
"响应式Web设计“这个名字是Ethan Marcotte在2010年发明的。当时,他在A List Apart上写了一篇文章(http://www.alistapart.com/articles/responsive-web-design/),这篇文章综合运用了三种已有技术(弹性网格布局、弹性图片/媒体、媒体查询)实现了一个解决方案,就叫”响应式Web设计“。
响应式网站设计有三个关键组成部分:1. media query; 2. 流动网格;3. 灵活缩放的图片
基于RWD而设计的网站利用CSS3 media queries规则来自动适应不同访问设备的屏幕尺寸和显示要求。而流动网格采用页面元素大小的相对单位(百分比或EM),而非传统设计使用的绝对单位(像素或点数),以确定页面各组成元素的大小。最后,图片大小也是采用相对单位而灵活缩放,不至于在小屏幕的移动设备上超出显示区域。
由上图可以得知,世界各地在不同时期不同地点所需要的构建网站的访问设备总有不同,因此正需要”响应式Web设计“来自动适应不同的访问设备,使用户减少无用的操作,提升效率的同时,提升用户的体验!
例子
百度的网址在进行搜索后的网址都有采用”响应式Web设计“。
网址链接如 https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=0&rsv_idx=1&ch=&tn=baidu&bar=&wd=%E5%93%8D%E5%BA%94%E5%BC%8F%E7%BD%91%E7%AB%99&rn=&oq=&rsv_pq=ce9ce96800077141&rsv_t=0861JxrLzFo1liyuZFompm1kt%2FYAXbhzVw3b4tF5R%2BdxEnuJ9TExQE9dY%2Bw&rqlang=cn&rsv_enter=1&prefixsug=%25E5%2593%258D%25E5%25BA%2594%25E5%25BC%258F&rsp=0&inputT=7396
而腾讯视频的网站则没有采用”响应式Web设计“。
网址链接如 https://v.qq.com/
RWD和前后端的关系
前端属于网页架构者,因此RWD的架构需要前端来完成。 并且前端工作者都精通HTML,与RWD十分相符。
后端属于网页编码者,RWD的编码则需要后端来完成。