一、是甚么
积极响应式中文网站结构设计（Responsive Web design）是一类互联网网页结构设计产业布局，网页的结构设计与合作开发应依照使用者犯罪行为和电子设备自然环境(控制系统互联网平台、萤幕体积、萤幕或非等)展开适当的积极响应和修正
叙述积极响应式介面最知名的一句话是“Content is like water”
讲透即是“假如将萤幕看做罐子，所以文本就像水那样”
积极响应式中文网站常用特征：
与此同时互联网连接PC + 智能智能手机 + 智能手机等
条码导航控制系统在吻合手执终端设备时发生改变为经典之作的triumph导航控制系统
中文网站的产业布局会依照视口来修正组件的大小不一和边线
二、与此同时实现形式
积极响应式结构设计的基本概念是透过新闻媒体查阅检验相同的电子设备萤幕体积做处置，为的是处置终端端，网页颈部要有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:是使用者的可以缩放的操作
与此同时实现积极响应式产业布局的形式有如下表所示：
新闻媒体查阅百分比vw/vhrem新闻媒体查阅
CSS3中的增加了更多的新闻媒体查阅，就像if条件表达式那样，我们可以设置相同类型的新闻媒体条件，并依照相关联的条件，给适当符合条件的新闻媒体调用相相关联的样式表
使用@Media查阅，可以针对相同的新闻媒体类型定义相同的样式，如：
@media screen and (max-width: 1920px) { … }
当视口在375px – 600px之间，设置特定字体大小不一18px
@media screen (min-width: 375px) and (max-width: 600px) {
body{
font-size: 18px;
}
}
透过新闻媒体查询，可以透过给相同分辨率的电子设备编写相同的样式来与此同时实现积极响应式的产业布局，比如我们为相同分辨率的萤幕，设置相同的背景图片
比如给小萤幕智能手机设置@2x图，为大萤幕智能手机设置@3x图，透过新闻媒体查阅就能很方便的与此同时实现
百分比
透过百分比单位 ” % ” 来与此同时实现积极响应式的效果
比如当浏览器的宽度或者高度发生变化时，透过百分比单位，可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而与此同时实现积极响应式的效果
height、width属性的百分比依托于父条码的宽高，但是其他盒子特性则不完全依赖父元素：
子元素的top/left和bottom/right假如设置百分比，则相对于直接非static定位(默认定位)的父元素的高度/宽度
子元素的padding假如设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。
子元素的margin假如设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width
border-radius不那样，假如设置border-radius为百分比，则是相对于自身的宽度
可以看到每个特性都使用百分比，会照成产业布局的复杂度，所以不建议使用百分比来与此同时实现积极响应式
vw/vh
vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度。任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一
与百分比产业布局很相似，在以前文章提过与%的区别，这里就不再展开述说
rem
在以前也讲到，rem是相对于根元素html的font-size特性，默认情况下浏览器字体大小不一为16px，此时1rem = 16px
可以利用前面提到的新闻媒体查阅，针对相同电子设备分辨率发生改变font-size的值，如下表所示：
@media screen and (max-width: 414px) {
html{
font-size: 18px}
}
@media screen and (max-width: 375px) {
html{
font-size: 16px}
}
@media screen and (max-width: 320px) {
html{
font-size: 12px}
}
为的是更准确监听电子设备可视窗口变化，我们可以在css之前插入script条码，文本如下表所示：
//动态为根元素设置字体大小不一function init (){
var width = document.documentElement.clientWidth
// 设置根元素字体大小不一。此时为宽的10等分 document.documentElement.style.fontSize = width / 10 + px}
//首次加载应用，设置一次init()
// 监听智能手机旋转的事件的时机，重新设置window.addEventListener(orientationchange, init)
// 监听智能手机窗口变化，重新设置window.addEventListener(resize, init)
无论电子设备可视窗口怎样变化，始终设置rem为width的1/10，与此同时实现了百分比产业布局
除此之外，我们还可以利用主流UI框架，如：element ui、antd提供的栅格产业布局与此同时实现积极响应式
小结
积极响应式结构设计与此同时实现通常会从以下几方面思考：
弹性盒子（包括图片、表格、视频）和新闻媒体查阅等技术使用百分比产业布局创建流式产业布局的弹性UI，与此同时使用新闻媒体查阅限制元素的体积和文本变更范围使用相对单位使得内容自适应调节选择断点，针对相同断点与此同时实现相同产业布局和文本展示三、总结
积极响应式产业布局优点可以看到：
面对相同分辨率电子设备灵活性强能够快捷解决多电子设备显示适应问题缺点：
仅适用产业布局、信息、框架并不复杂的部门类型中文网站兼容各种电子设备工作量大，效率低下代码累赘，会出现隐藏无用的元素，加载时间加长其实这是一类折中性质的结构设计解决方案，多方面因素影响而达不到最佳效果一定程度上发生改变了中文网站原有的产业布局结构，会出现使用者混淆的情况参考文献
https://baike.baidu.com/item/%E5%93%8D%E5%BA%94%E5%BC%8F%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1https://juejin.cn/post/6844904082751111176https://vue3js.cn/interview—The End—
系列正在更新：14/20点击下方卡片解锁更多
