关于响应式设计的一些关键点

1、响应式设计关键点在于：

媒体查询、流动网格、弹性图片，而不是flex布局或者是自适应布局

响应式和自适应的最直观的区别是：
自适应是为了解决如何才能在不同大小的设备上呈现同样的网页，直观地来看就是盒子会根据屏幕分辨率的大小进行伸缩变换。
所以，就是PC端与手机端浏览的时候就是一个设计的板式，这样子当然是体验比较差的。

响应式设计就解决了这个问题，即不同大小的设备，不同类型的设备显现不同的网页，具体的区别在于不同的大小或设备类型的设备，加载不同的css。
这里使用到的最多的css3中的@media属性，即媒体查询

2、响应式设计实践原则

• progressive enhancement（渐进增强）

渐进增强(英语：Progressive enhancement)是网页设计的一种策略，强调可访问性，语义HTML标记，外部样式表和脚本技术。 渐进增强使用Web技术以分层的方式，允许所有人访问网页的基本内容和功能，使用任何浏览器或互联网连接，同时还给更先进的浏览器软件或更大的带宽提供了这些页面的一个增强版本。

• graceful degradation (优雅降级)

优雅降级，用一句话来说就是：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

3、设置断点

应用css3中的媒体查询属性，常见的断点设置如下：

（小屏幕）----（中屏幕）----（大屏幕）
-- 0~480 ------- 481~800------801~1400

小屏幕对应的是我们最常用的移动设备，即手机。中屏幕一般是平板的视觉效果，而大屏幕则是我们平时的笔记本或者是大屏幕了。

4、一个原则：先针对受众多的进行设计

我们在进行设计的时候，一个原则就是，那一种设备的用户比较多，就先针对它来设计。设计完再考虑其他的使用情况。抓住主要的目标用户。

5、相关单位

vw、vh、em、rem

vw 相对于视窗的宽度：视窗宽度是100vw
vh 相对于视窗的高度：视窗宽度是100vh
这里重点要理解视窗的定义，避免掉坑，譬如，当我们手机输入文本，弹出键盘的时候，vh就缩小来。这时候vh并不近似等于屏幕大小，而是除来手机键盘之外的部分。

并不是所有浏览器都会兼容rem，为了代码的健壮性，在css中写两行：

font-size: 16px;
font-size: 1rem;

6、常见的响应式框架

以下列出一些对响应式设计做出相应处理的前端框架，我们可以根据使用习惯与实际情况进行相应的选择：

• bootstrap
• foundation
• semantic UI
• Pure.css（轻量级）