响应式网页设计

响应式网站设计(简称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的编码则需要后端来完成。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 响应式网页设计 定义: 响应式Web设计(Responsive Web design)是:页面的设计与开发应当根据...
    little_bottle09阅读 3,984评论 0 4
  • 名词解释 响应式web设计:基于HTML5和css3的RWD响应式web设计,页面内容会随着视口及设备的不同而呈现...
    N黄舒婷阅读 3,395评论 0 0
  • 响应式Web设计:网页内容随着访问的不同视口及设备调整呈现 1.基于HTML5和CSS3的RWD(Responsi...
    Eugenie_阅读 3,596评论 0 0
  • 响应式网站设计(Responsive Web design)是一种网络页面设计布局,其理念是:集中创建页面的图片排...
    棋时阅读 3,106评论 0 2
  • 名词解释 响应式Web设计(Responsive Web Design) 所谓响应式Web设计,就是网页内容会随着...
    Autistic_8d3b阅读 4,692评论 0 0