vue如何从pc端到移动端

苏柒258

已于 2024-06-21 18:10:48 修改

阅读量867

点赞数 20

文章标签： vue.js 前端 elementui

于 2024-06-21 18:10:29 首次发布

本文链接：https://blog.csdn.net/weixin_65201086/article/details/139865294

版权

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;

}