第六篇【传奇开心果系列】Vant of Vue 开发移动应用示例：深度解析响应式布局支持_van-row van-col 如何设置列宽比例(1)

最后

---

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

然后，在@media规则内，我们设置了两个媒体查询。第一个媒体查询针对最大宽度为768px的屏幕，设置了较小的字体大小和内边距。第二个媒体查询针对最小宽度为769px的屏幕，设置了较大的字体大小和内边距。

这样，根据不同的屏幕尺寸，按钮的样式会自动适应并改变。

通过使用媒体查询，我们可以根据不同的屏幕尺寸设置组件的样式，从而实现响应式布局。这使得组件能够在不同的设备上以最佳的方式呈现，并提供更好的用户体验。

下面是一个更全面的示例代码，展示如何使用Vant的媒体查询和响应式工具类来实现更复杂的响应式布局：

<template>
  <div class="container">
    <van-row :gutter="20">
      <van-col :span="24" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
        <div class="box">Box 1</div>
      </van-col>
      <van-col :span="24" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
        <div class="box">Box 2</div>
      </van-col>
      <van-col :span="24" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
        <div class="box">Box 3</div>
      </van-col>
    </van-row>
  </div>
</template>

<style>
.container {
 padding: 20px;
}

.box {
 background-color: #f2f2f2;
 height: 200px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 24px;
 color: #333;
}

/\* 媒体查询 \*/
@media screen and (max-width: 768px) {
 .box {
 font-size: 18px;
 }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
 .box {
 font-size: 20px;
 }
}
</style>

在这个示例中，我们使用了Vant的Row和Col组件来创建一个响应式的布局。其中，Row表示行，Col表示列，可以根据不同的屏幕尺寸设置列的宽度。

在Col组件上，我们使用了:lg、:md和:sm属性来设置不同屏幕尺寸下的列宽。对于大屏幕(lg)，每列占据8份；对于中等屏幕(md)，每列占据12份；对于小屏幕(sm)，每列占据24份，即一整行。

在样式部分，我们定义了一个.box类，表示每个盒子的样式。通过媒体查询，我们根据不同的屏幕尺寸设置了不同的字体大小。

当屏幕宽度小于等于768px时，字体大小为18px；当屏幕宽度在769px到1024px之间时，字体大小为20px。

这样，无论是在大屏幕、中等屏幕还是小屏幕下，盒子的列宽和字体大小都会自动调整，实现了响应式布局。

通过这个示例，您可以更好地理解如何使用Vant的媒体查询和响应式工具类来实现灵活的响应式布局。您可以根据具体的需求，调整和扩展代码，以满足您的项目要求。

三、短点设置实现响应式布局示例代码

Vant提供了一组预定义的断点，用于根据不同屏幕宽度进行响应式布局。您可以根据自己的需求自定义这些断点设置。以下是一个示例代码，演示了如何使用Vant的断点设置：

import { createApp } from 'vue';
import { createBreakpoint } from 'vant';

// 自定义断点设置
const customBreakpoints = {
  xs: 320,    // 小屏幕设备（手机）上的断点
  sm: 576,    // 中等屏幕设备（平板电脑）上的断点
  md: 768,    // 中大屏幕设备上的断点
  lg: 992,    // 大屏幕设备（电脑）上的断点
  xl: 1200    // 超大屏幕设备上的断点
};

// 创建断点实例
const breakpoint = createBreakpoint(customBreakpoints);

// 注册断点实例到Vant
createApp(App).use(breakpoint).mount('#app');

在这个示例代码中，我们首先通过createBreakpoint函数创建了一个断点实例，并传入了自定义的断点设置对象customBreakpoints。然后，将断点实例注册到Vant的Vue应用中。

通过自定义断点设置，您可以根据需要定义不同屏幕尺寸下的断点值。例如，xs表示小屏幕设备（手机）上的断点，sm表示中等屏幕设备（平板电脑）上的断点，以此类推。您可以根据实际需求调整断点的数值。

四、响应式工具类实现响应式布局示例代码

Vant提供了一系列响应式的CSS类，用于控制组件在不同屏幕尺寸下的显示和布局。您可以通过在元素上添加相应的CSS类，实现响应式的样式调整。以下是一些常用的响应式工具类示例代码：

1. 隐藏和显示类：

<!-- 在手机设备上隐藏该元素 -->
<div class="van-xs-hide">内容</div>

<!-- 在平板电脑设备上显示该元素 -->
<div class="van-sm-show">内容</div>

2. 布局类：

<!-- 在小屏幕设备上设置元素宽度为100% -->
<div class="van-xs-24">内容</div>

<!-- 在中等屏幕设备上设置元素宽度为50% -->
<div class="van-md-12">内容</div>

<!-- 在大屏幕设备上设置元素宽度为33.33% -->
<div class="van-lg-8">内容</div>

3. 偏移类：

<!-- 在小屏幕设备上设置元素左侧偏移为20px -->
<div class="van-xs-offset-20">内容</div>

<!-- 在中等屏幕设备上设置元素右侧偏移为10px -->
<div class="van-md-offset-right-10">内容</div>

4. 对齐类：

<!-- 在小屏幕设备上设置元素居中对齐 -->
<div class="van-xs-text-center">内容</div>

<!-- 在中等屏幕设备上设置元素右对齐 -->
<div class="van-md-text-right">内容</div>

这些是一些常用的响应式工具类示例代码，您可以根据实际需求选择合适的类应用于元素上，以实现在不同屏幕尺寸下的样式调整。

五、栅格系统实现响应式布局示例代码

Vant提供了栅格系统，用于实现灵活的响应式布局。您可以将组件放置在栅格中，根据不同的屏幕尺寸设置栅格的列数和宽度，实现自适应的布局效果。以下是一个示例代码，演示了如何使用Vant的栅格系统：

<van-row :gutter="20">
  <van-col :span="24" :sm="12" :md="8" :lg="6">
    <!-- 第一列内容 -->
  </van-col>
  <van-col :span="24" :sm="12" :md="8" :lg="6">
    <!-- 第二列内容 -->
  </van-col>
  <van-col :span="24" :sm="12" :md="8" :lg="6">
    <!-- 第三列内容 -->
  </van-col>
  <van-col :span="24" :sm="12" :md="8" :lg="6">
    <!-- 第四列内容 -->
  </van-col>
</van-row>

在这个示例代码中，我们使用了van-row和van-col组件来创建栅格布局。van-row表示一行，包含多个列。van-col表示每一列，可以设置不同的列宽。

通过设置:span属性值，可以控制每列在不同屏幕尺寸下所占的宽度比例。例如，:sm="12"表示在小屏幕设备（如手机）上，该列占据总宽度的一半，:md="8"表示在中等屏幕设备（如平板电脑）上，该列占据总宽度的三分之一，:lg="6"表示在大屏幕设备（如电脑）上，该列占据总宽度的四分之一。

您可以根据实际需求修改每列的内容，并根据不同屏幕尺寸调整:span属性值，以达到您想要的响应式布局效果。

六、响应式组件实现响应式布局示例代码

Vant的栅格系统是通过van-row和van-col组件来实现的，这两个组件用于创建栅格布局。可以根据不同屏幕尺寸设置每列的宽度，从而实现响应式布局。以下是一个示例代码：

<template>
  <van-row :gutter="20">
    <van-col :span="24" :sm="12" :md="8" :lg="6">
      <!-- 第一列内容 -->
    </van-col>
    <van-col :span="24" :sm="12" :md="8" :lg="6">
      <!-- 第二列内容 -->
    </van-col>
    <van-col :span="24" :sm="12" :md="8" :lg="6">
      <!-- 第三列内容 -->
    </van-col>
    <van-col :span="24" :sm="12" :md="8" :lg="6">
      <!-- 第四列内容 -->
    </van-col>
  </van-row>
</template>

<script>
export default {
  // 组件逻辑代码
}
</script>

<style scoped>
/* 样式代码 */
</style>

在这个示例代码中，我们使用了van-row和van-col组件来创建栅格布局。通过设置:span属性值，可以控制每列在不同屏幕尺寸下所占的宽度比例。例如，:sm="12"表示在小屏幕设备（如手机）上，该列占据总宽度的一半，:md="8"表示在中等屏幕设备（如平板电脑）上，该列占据总宽度的三分之一，:lg="6"表示在大屏幕设备（如电脑）上，该列占据总宽度的四分之一。

您可以根据实际需求修改每列的内容，并根据不同屏幕尺寸调整:span属性值，以达到您想要的响应式布局效果。

七、内置的媒体查询工具类来设置样式实现响应式布局示例代码

以下是使用Vant内置的媒体查询工具类来设置样式的示例代码：

<template>
  <div>
    <div class="van-xs">Extra Small Screen</div>
    <div class="van-sm">Small Screen</div>
    <div class="van-md">Medium Screen</div>
    <div class="van-lg">Large Screen</div>
    <div class="van-xl">Extra Large Screen</div>
  </div>
</template>

<style>
.van-xs {
 /\* 样式针对 extra small 屏幕尺寸 \*/
}

.van-sm {
 /\* 样式针对 small 屏幕尺寸 \*/
}

.van-md {
 /\* 样式针对 medium 屏幕尺寸 \*/
}

.van-lg {
 /\* 样式针对 large 屏幕尺寸 \*/
}

.van-xl {
 /\* 样式针对 extra large 屏幕尺寸 \*/
}
</style>

在上面的示例中，我们使用了.van-xs、.van-sm、.van-md、.van-lg、.van-xl这些类名来分别针对不同的屏幕尺寸设置样式。你可以根据需要在对应的类名下编写样式规则，以实现在不同屏幕尺寸下的样式适配。

八、自定义断点设置实现响应式布局示例代码

要自定义断点并配置Vant的断点设置，可以按照以下示例代码进行操作：

// 在项目的入口文件中引入 Vant
import { createApp } from 'vue';
import { vant } from 'vant';
import 'vant/lib/index.css';

const app = createApp(App);
app.use(vant);
app.mount('#app');

// 创建一个自定义的 Vant 断点配置文件（例如 breakpoints.js）
export default {
  xs: 480, // extra small
  sm: 576, // small
  md: 768, // medium
  lg: 992, // large
  xl: 1200, // extra large
};

// 在项目中的需要的地方引入自定义的断点配置文件
import breakpoints from './breakpoints';

// 在使用 Vant 之前，修改 Vant 的默认断点配置
import { use } from 'vant';

use({
  install(app) {
    app.config.globalProperties.$vant = {
      ...app.config.globalProperties.$vant,
      ...breakpoints,
    };
  },
});

通过上述代码，我们在项目中引入了 Vant，并创建了一个自定义的断点配置文件 breakpoints.js。在该文件中，我们定义了自己的断点尺寸，例如 xs、sm、md、lg、xl。

然后，在项目中需要使用 Vant 的地方，我们引入了自定义的断点配置文件，并通过 Vant 的 use 方法修改了默认断点配置。这样，Vant 将使用我们自定义的断点配置来进行布局和样式的适配。

文末

如果30岁以前，可以还不知道自己想去做什么的话，那30岁之后，真的觉得时间非常的宝贵，不能再浪费时间在一些碎片化的事情上，比如说看综艺，电视剧。一个人的黄金时间也就二，三十年，不能过得浑浑噩噩。所以花了基本上休息的时间，去不断的完善自己的知识体系，希望可以成为一个领域内的TOP。

同样是干到30岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说30岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

JavaScript