一、前言
响应式是css中一个比较重要的东西，如果你写过一些网页，就会发现我们很多布局都是需要指定标签尺寸的。
这很容易导致你指定的尺寸只能在某个尺寸的屏幕上工作良好，比如电脑屏幕。
一旦你将该网页放在平板、手机上去显示，就会出现很严重的布局错误显示问题，这也是你看到某些网站只有用电脑访问时才能正常显示的原因，而使用手机显示界面就会变得很难看。
响应式便是用来解决这个问题的，它可以让我们自定义一些布局在不同的尺寸屏幕下使用不同的样式，从而实现响应式布局的目的。
二、css媒体查询
响应式布局的基础就是css提供的一个叫做媒体查询的东西，它可以用来判断当前屏幕的大小范围、从而实现在不同的屏幕大小范围内使用不同的样式。
其使用方式非常简单：
其使用方式便是用@media来查询，比如这里我分别查询了两个，第一个是min-width为500px，即最小宽度为500px，含义就是在当前屏幕的宽度大于500px时应用该样式。
而第二个与之相反，就是宽度在小于500px时应用该样式，从而实现了“响应式”的效果。
它的使用就是这么简单，唯一的问题就是使用起来麻烦，所以我们一般会使用开源库提供的功能完成“响应式”的特性。
三、开源库
虽然开源库有很多，但其使用的逻辑却基本一致，这里便直接采用vue3的组件开源库Element-plus为例，基本使用方法可以参考文章：Element开源UI库使用。
vue个人同样认为是目前前端必学的框架之一，不会的可以参考文章：vue初识。
它的Layout布局组件中就有响应式布局的功能，最重要的便是旁边提到的这几个尺寸：xs、sm、md、lg、xl。
这几个尺寸分别代表了不同的屏幕，代表着在不同尺寸下要展示的范围：
从它的实现代码可以看出它的实现逻辑：
- 首先将一行（
el-row组件代表一行）平均分为24份。 - 正常来说我们就需要在这一行中放入许多“列”标签，也就是这里的
el-col组件。 - 然后我们就可以直接写这些列在不同屏幕尺寸下，占据一行24份中的多少份，就能很方便的实现响应式布局。
比如上我用红色线框框起来的部分，就是在xl尺寸下（宽度≥1920px），第一、四列占据一份，第二、三列占据11份，其它尺寸也是同理。
具体不同的名字所对应的尺寸如下：
虽然我这里介绍的仅仅只是vue3中的Element-plus库，但事实上其它开源库的使用方式基本与之相似，可以自行琢磨。
