响应式网页设计
2018-03-07 本文已影响0人
白_7089
什么是响应式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设计
2018-03-10.png
由此可见，对于浏览器的使用不仅仅是在电脑上，为了能够满足需求，响应式waeb设计是必需的
例子
使用了响应式网页设计的网址：
非凡品味
没有使用响应式网页设计的网址：
淘宝
RWD的组成科技
- media query：
媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.
- 流动网格:
各个区块的位置都是浮动的，不是固定不变的。
- 灵活缩放的图片:
除了布局和文本，RWD 还实现图片的自动缩放。
RWD与前后端的关系
- 前端
方便用户阅读和导航浏览，减少用户的放大/缩小/滑动操作，从而提供完整而友好的用户体验。 - 后端
构建可自动适应不同的访问设备的网站
