【响应式设计】

什么是响应式设计？

响应式网站设计是一种网络页面设计布局，页面的尺寸大小会根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的调整

响应式设计的特点

（1）同时适配PC + 平板 + 手机等

（2）标签导航在接近手持终端设备时改变为经典的抽屉式导航

（3）网站的布局会根据视口来调整模块的大小和位置

响应式设计的基本原理

通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

其中：

• width=device-width: 是自适应手机屏幕的尺寸宽度

• maximum-scale:是缩放比例的最大值

• inital-scale:是缩放的初始化

• user-scalable:是用户的可以缩放的操作

响应式设计的实现方式

媒体查询

@media screen and (max-width: 1920px) { ... }

@media screen (min-width: 375px) and (max-width: 600px) { ... }

百分比

height,width属性的百分比依托于父标签的宽高

子元素的top/left和bottom/right设置百分比，相对于默认定位的父元素的高度/宽度

子元素的padding设置百分比，相对于直接父亲元素的width，而与父元素的height无关

子元素的margin设置成百分比，相对于直接父元素的width

border-radius设置为百分比，是相对于自身的宽度

vw/vh

vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度。 任意层级元素，在使用vw单位的情况下,1vw都等于视图宽度的百分之一

rem

rem是相对于根元素html的font-size属性，默认情况下浏览器字体大小为16px

利用主流UI框架

响应式设计的优缺点

优点：

面对不同分辨率设备灵活性强

能够快捷解决多设备显示适应问题

缺点：

仅适用布局、信息、框架并不复杂的部门类型网站

兼容各种设备工作量大，效率低下

代码累赘，会出现隐藏无用的元素，加载时间加长

其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果

一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

总结

以上就是我对相应式布局的理解，希望对刚刚接触移动端的你有所收获！