一、是甚么
积极响应式中文网站结构设计（Responsive Web design）是一类互联网网页结构设计产业布局，网页的结构设计与合作开发应依照采用者犯罪行为和电子设备自然环境(控制系统互联网平台、萤幕体积、萤幕或非等)展开适当的积极响应和修正
叙述积极响应式介面最知名的一句话是“Content is like water”
讲透即是“假如将萤幕看做罐子，所以文本就像水那样”
积极响应式中文网站常用特征：
与此同时互联网连接PC + 智能手机 + 智能手机等条码导航控制系统在吻合手执终端设备时发生改变为经典之作的triumph导航控制系统中文网站的产业布局会依照视口来修正组件的大小不一和边线
二、与此同时实现形式
积极响应式结构设计的基本概念是透过新闻媒体查阅检验相同的电子设备萤幕体积做处置，为的是处置终端端，网页颈部要有meta新闻稿viewport
特性相关联如下表所示：
width=device-width: 是自适应智能手机萤幕的体积长度maximum-scale:是翻转比率的最小值inital-scale:是翻转的初始化user-scalable:是采用者的能翻转的操作方式与此同时实现积极响应式产业布局的形式有如下表所示：
新闻媒体查阅比率vw/vhrem新闻媒体查阅
CSS3 中的减少了更多的新闻媒体查阅，就像if前提函数那样，我们能增设相同类别的新闻媒体前提，并依照相关联的前提，给适当符合前提的新闻媒体初始化相相关联的JSP
采用@Media查阅，能特别针对相同的新闻媒体默认值相同的式样，如：
当视口在375px – 600px间，增设某一调色板18px
透过新闻媒体查阅，能透过给相同分辨率的电子设备编写相同的式样来与此同时实现积极响应式的产业布局，比如我们为相同分辨率的萤幕，增设相同的背景图片
比如给小萤幕智能手机增设@2x图，为大萤幕智能手机增设@3x图，透过新闻媒体查阅就能很方便的与此同时实现
比率
透过比率单位 ” % ” 来与此同时实现积极响应式的效果
比如当浏览器的长度或者高度发生变化时，透过比率单位，能使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而与此同时实现积极响应式的效果
height、width特性的比率依托于父条码的宽高，但是其他盒子特性则不完全依赖父元素：
子元素的top/left和bottom/right假如增设比率，则相较于直接非static定位(默认定位)的父元素的高度/长度子元素的padding假如增设比率，不论是垂直方向或者是水平方向，都相较于直接父亲元素的width，而与父元素的height无关。子元素的margin假如增设成比率，不论是垂直方向还是水平方向，都相较于直接父元素的widthborder-radius不那样，假如增设border-radius为比率，则是相较于自身的长度能看到每个特性都采用比率，会照成产业布局的复杂度，所以不建议采用比率来与此同时实现积极响应式
vw/vh
vw表示相较于视图窗口的长度，vh表示相较于视图窗口高度。 任意层级元素，在采用vw单位的情况下，1vw都等于视图长度的百分之一
与比率产业布局很相似，在以前文章提过与%的区别，这里就不再展开述说
rem
在以前也讲到，rem是相较于根元素html的font-size特性，默认情况下浏览器字体大小为16px，此时1rem = 16px
能利用前面提到的新闻媒体查阅，特别针对相同电子设备分辨率发生改变font-size的值，如下表所示：
为的是更准确监听电子设备可视窗口变化，我们能在css之前插入script条码，文本如下表所示：
无论电子设备可视窗口怎样变化，始终增设rem为width的1/10，与此同时实现了比率产业布局
除此之外，我们还能利用主流UI框架，如：element ui、antd提供的栅格产业布局与此同时实现积极响应式
小结
积极响应式结构设计与此同时实现通常会从以下几方面思考：
弹性盒子（包括图片、表格、视频）和新闻媒体查阅等技术采用比率产业布局创建流式产业布局的弹性UI，与此同时采用新闻媒体查阅限制元素的体积和内容变更范围采用相较单位使得文本自适应调节选择断点，特别针对相同断点与此同时实现相同产业布局和文本展示三、总结
积极响应式产业布局优点能看到：
面对相同分辨率电子设备灵活性强能够快捷解决多电子设备显示适应问题缺点：
仅适用产业布局、信息、框架并不复杂的部门类别中文网站兼容各种电子设备工作量大，效率低下代码累赘，会出现隐藏无用的元素，加载时间加长其实这是一类折中性质的结构设计解决方案，多方面因素影响而达不到最佳效果一定程度上发生改变了中文网站原有的产业布局结构，会出现采用者混淆的情况
