响应式设计

响应式设计

响应式是什么？

Responsive Web Design(RWD)，应用程序在不同设备或者不同尺寸大小的终端屏幕上做不同内容的展示；

自适应是什么？

Adaptive Web Design(AWD)，应用程序使用多个版本用户界面，针对不同设备，服务端返回不同版本用户界面；

响应式vs自适应

1. 响应式是一套用户界面，后者是多套；
2. 自适应需要服务端检测请求设备分辨率相关信息，返回对应版本渲染；

渐进增强

以移动设备优先，一些低版本或旧系统的设备并不支持js或css的新特性，通常实现一个基础版本，在大部分设备能满足基本功能后，兼容新特性新功能，拓展应用；

常用语响应式设计的UI单位：rem | %

rem是一个缩放单位，基于字体尺寸，基于文档根元素字体尺寸，如font-size为12px，则1rem=12px; %是基于父元素的相关属性尺寸缩放，如父元素width:100px,font-size:14px；则width:10%就是10px,font-size:110%就是15.4px（取整）；例外：margin,padding属性的百分比是基于当前元素width值缩放；

视口viewport

1. 视觉窗口：当前屏幕上页面的可见区域，可通过window.visualViewportAPI获取;
2. 布局视口：可以理解为文档区域，可通过document.body.clientWidth 获取；
3. 理想视口：设备的屏幕尺寸；

声明当前布局视口使用理想视口宽度，缩放比例为1，阻止设备自动调整页面大小；

实现

1. 媒介查询 @media screen and (/尺寸/)
2. 百分比布局实现弹性布局
3. 相对单位使内容自适应
4. 图片响应式：

• 宽度百分比缩放
• picture根据设备大小、设备分辨率、屏幕方向选择不同图片

参考文章：https://juejin.im/post/5a5093bd6fb9a01c9b65c3c2#heading-37