1.pc端到移动端响应式页面
简介：element里面表述的layout响应式布局参考了bootstrap的响应式布局
须注意的是，bootstrap与vue的栅格不一样！！！ vue是24个格子！也就是说，如果你有三个区块，三个区块的占比加一起要是24！！！
官方文档element的layout响应式页面布局
链接在此：Layout 布局 | Element Plus
<el-row :gutter="10">
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
<div class="grid-content ep-bg-purple" />
</el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
<div class="grid-content ep-bg-purple-light" />
</el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
<div class="grid-content ep-bg-purple" />
</el-col>
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
<div class="grid-content ep-bg-purple-light" />
</el-col>
</el-row>-
1.1<el-row>： -
这是一个行容器组件，用于包裹列组件
<el-col>。:gutter="10"属性表示这一行中所有列之间的间隔是 10 像素。 -
1.2<el-col>： -
这是一个列组件，用于在行中创建列。每个
<el-col>组件都可以根据不同的屏幕尺寸（由xs,sm,md,lg,xl指定）来调整其占据的栅格数。栅格总数为 24。 -
1.3属性介绍：
- xs、sm、md、lg 和 xl。
xs：Extra Small，特小号，通常对应于手机屏幕尺寸。sm：Small，小号，通常对应于平板屏幕尺寸。md：Medium，中号，通常对应于小型桌面显示器。lg：Large，大号，通常对应于大型桌面显示器。xl：Extra Large，特大号，通常用于更大的桌面显示器。
2.举个栗子（字体自适应）
比如说让字体自适应大小（最好用rem不要用px）
因为：
-
px（像素）是绝对单位长度，它代表的是显示器上给我们的画面的像素大小，每个像素的大小是一样的。这种单位的特点是稳定和精确，但它的缺点是当用户改变浏览器的缩放时，页面布局可能会被破坏，导致页面无法很好地适应不同的屏幕尺寸和分辨率。
-
rem是相对单位长度，它相对于根元素（即html元素）的字体大小来计算大小。这意味着，当根元素的字体大小发生变化时，使用rem单位定义的元素大小也会相应地调整。rem的优点是能够根据根元素字体大小的调整而自适应调整元素尺寸，适用于响应式布局。这种单位能够避免字体大小逐层复合的连锁反应，使得页面的布局更加灵活和可扩展。
首先 ：hashSize是字体在正常情况下的大小为1rem大小
.hashSize {
font-size: 1rem;
}
其次：media (max-width: 720px)是指在屏幕小于720px的话字体大小就是0.8rem
@media (max-width: 720px) {
.hashSize {
font-size: 0.8rem;
}
}
3.再举个栗子（页面从pc端到移动端）
如果我有三个区块！那我如何布局呢？（比例仅供参考！真的是仅供参考！！视自身项目布局情况而定！！！）
我的左边块： <el-col :xs="24" :sm="24" :lg="10" :xl="8">
我的中间块：<el-col :xs="24" :sm="12" :lg="6" :xl="6">
我的右侧块： <el-col :xs="24" :sm="24" :lg="8" :xl="8">
4.作者有话说
本人尚在学习，有不足的地方或者有疑问请联系我！！！
