首页 前端知识 vue如何从pc端到移动端

vue如何从pc端到移动端

2024-07-20 17:07:55 前端知识 前端哥 389 752 我要收藏

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.作者有话说

本人尚在学习,有不足的地方或者有疑问请联系我!!!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14015.html
标签
评论
发布的文章

HTML5 移动开发秘籍(一)

2024-08-05 23:08:12

【HTML5系列教程】

2024-08-05 23:08:12

HTML5面试题

2024-08-05 23:08:06

JQuery基础---01

2024-08-05 23:08:34

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!