什么是响应式web设计
1.基于HTML5和CSS3的RWD(Resposive Web Design)响应式web设计
2.随着视口(viewport)及设备(device)的不同呈现不同的样式(style)
3.利用弹性网络布局(fluid grid)、弹性图片/媒体(flexible images)、媒体查询(media queries)等技术实现
RWD是什么
1.面对不断扩展的浏览器和设备应对方案
2. 可以让一个网站同时适配多种设备和多个屏幕
3.可以让网站的布局和功能随用户的使用环境(屏幕大小、输入方式、设备/浏览器能力)而变化
4.基于HTML5和CSS3的RWD不需要以来后端方案
5.由Ethan Marcotte于2010年发布的一篇文章中提出的新词汇
为什么需要响应式web设计
由于上网设备屏幕之间出现了前所未有的差距,因此为了满足多方需求产生了响应式web设计
由此可见,对于浏览器的使用不仅仅是在电脑上,为了能够满足需求,响应式waeb设计是必需的
例子
使用了响应式网页设计的网址:
非凡品味
没有使用响应式网页设计的网址:
淘宝
RWD的组成科技
- media query:
媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.
- 流动网格:
各个区块的位置都是浮动的,不是固定不变的。
- 灵活缩放的图片:
除了布局和文本,RWD 还实现图片的自动缩放。
RWD与前后端的关系
- 前端
方便用户阅读和导航浏览,减少用户的放大/缩小/滑动操作,从而提供完整而友好的用户体验。 - 后端
构建可自动适应不同的访问设备的网站