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

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

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

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

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

二、响应式设计实践原则

• progressive enhancement（渐进加强）

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

• graceful degradation (优雅降级)

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

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

三、设置断点

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

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

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

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

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

五、相关单位

vw、vh、em、rem

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

并非全部浏览器都会兼容rem，为了代码的健壮性，在css中写两行：

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

六、常见的响应式框架

如下列出一些对响应式设计作出相应处理的前端框架，咱们能够根据使用习惯与实际状况进行相应的选择：

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