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

后话

---

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

对于面试，说几句个人观点。

面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。

所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。

// 自定义断点设置
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`表示中等屏幕设备（平板电脑）上的断点，以此类推。您可以根据实际需求调整断点的数值。


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


![在这里插入图片描述](https://img-blog.csdnimg.cn/e0e1d81d0ebd465885e697c5c258797c.jpg)Vant提供了一系列响应式的CSS类，用于控制组件在不同屏幕尺寸下的显示和布局。您可以通过在元素上添加相应的CSS类，实现响应式的样式调整。以下是一些常用的响应式工具类示例代码：


1. 隐藏和显示类：

内容

内容

2. 布局类：

内容

内容

内容

3. 偏移类：

内容

内容

4. 对齐类：

内容

内容

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


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


![在这里插入图片描述](https://img-blog.csdnimg.cn/74ea115b1239403fb7508668251ef6d8.jpg)Vant提供了栅格系统，用于实现灵活的响应式布局。您可以将组件放置在栅格中，根据不同的屏幕尺寸设置栅格的列数和宽度，实现自适应的布局效果。以下是一个示例代码，演示了如何使用Vant的栅格系统：

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


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


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


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


![在这里插入图片描述](https://img-blog.csdnimg.cn/3fd7026146c046628ad48c432d6c4f5b.jpg)Vant的栅格系统是通过`van-row`和`van-col`组件来实现的，这两个组件用于创建栅格布局。可以根据不同屏幕尺寸设置每列的宽度，从而实现响应式布局。以下是一个示例代码：

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


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


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


![在这里插入图片描述](https://img-blog.csdnimg.cn/726301a9fa8b40e0b587e97743b81a7b.jpg)以下是使用Vant内置的媒体查询工具类来设置样式的示例代码：

Extra Small Screen

Small Screen

Medium Screen

Large Screen

Extra Large Screen

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


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


![在这里插入图片描述](https://img-blog.csdnimg.cn/a51ce6710eb44a999054786559512240.jpg)要自定义断点并配置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.KaTeX parse error: Expected '}', got 'EOF' at end of input: …obalProperties.vant,
…breakpoints,
};
},
});

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


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


请注意，以上示例中的代码是基于 Vue 3.x 和 Vant 3.x 的。如果你使用的是其他版本的 Vue 或 Vant，请根据相应的版本文档进行适配。


### 九、Flex实现响应式布局示例代码


![在这里插入图片描述](https://img-blog.csdnimg.cn/c1c73483b3fe49df8d9c210f404f18bf.jpg)Vant广泛使用Flexbox弹性布局模型来设计和布局组件，以实现在不同屏幕尺寸下的自适应和排列。以下是一个使用Vant Flex布局的示例代码：

Item 1

Item 2

Item 3

在上面的示例中，我们创建了一个容器 `.container`，并在其中使用了Flex布局。`.flex-container` 是一个Flex容器，它的子元素 `.flex-item` 会根据剩余空间自动排列。


通过设置 `.flex-item` 的 `flex` 属性，我们指定了子元素的弹性，其中 `flex: 1 0 33.33%` 表示子元素的弹性比例为1，不允许缩小，初始宽度为33.33%。这样，无论容器的宽度如何变化，子元素都会平均占据一行的三分之一空间。


你可以根据需要在Flex容器和子元素上应用不同的样式，并根据项目要求进行调整。这样，Vant的Flex布局能够帮助你实现在不同屏幕尺寸下的自适应和排列效果。  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/0402eb1f341f4cbd8f69cb3a33eb934f.jpg)下面是一个更复杂的示例代码，展示了如何在Vant中使用Flex布局，并结合其他组件进行更丰富的布局和排列：

Box 1

Box 2

<van-row>
  <van-col span="8">
    <div class="box">Box 3</div>
  </van-col>
  <van-col span="8">
    <div class="box">Box 4</div>
  </van-col>
  <van-col span="8">
    <div class="box">Box 5</div>
  </van-col>
</van-row>