介绍
响应式设计是网页应用程序中常见的功能,作为开发者,我们必须支持各种设备和屏幕尺寸, CSS 是简单的应用案例和高效的性能方式的绝佳工具,但是,管理复杂的媒体查询甚至在使用预处理器(SASS、PostCSS(https://andsky.com/tech/tutorials/css-postcss-cssnext-cssnano)、LESS等方面也可能变得困难。
借助 MatchMedia API,Vue.js 可以大大降低处理媒体查询和响应式设计的复杂性,提供与基于组件的架构无缝集成,保持清洁的声明和语义方法。
在本文中,您将探索可用于媒体查询的 vue-mq插件的功能。
前提条件
如果您想跟随这篇文章,您将需要:
<$>[warning] 警告: 此插件依赖 matchMedia API 来检测屏幕大小的变化。因此,对于较旧的浏览器和 Internet Explorer,您应该使用 Paul Irish’s matchMedia polyfill <$>
本教程已通过 Node v15.8.0、npm v7.5.4、Vue v12.6.11 和 vue-mq v1.0.1 进行验证。
使用vue-mq
首先,要使用vue-mq,打开终端并导航到现有的Vue项目目录,然后运行以下命令:
1npm install [email protected]
接下来,使用代码编辑器,编辑您的Vue项目并导入库:
1import VueMq from 'vue-mq'
在注册插件时定义您的自定义突破点。 关键是突破点,值是像素:
1Vue.use(VueMq, {
2 breakpoints: {
3 sm: 450,
4 md: 1250,
5 lg: Infinity,
6 }
7})
在本示例中,定义了三个分断点:sm为小屏幕;md为中型屏幕;lg为大屏幕。
您还可以根据设备或任何对您有意义的东西命名您的分区:
1Vue.use(VueMq, {
2 breakpoints: {
3 mobile: 450,
4 tablet: 900,
5 laptop: 1250,
6 desktop: Infinity,
7 }
8})
在本示例中,定义了四个分断点:一个移动、平板电脑、笔记本电脑和一个桌面屏幕大小。
使用vue-mq与条件渲染
很多时候,在处理响应式设计时,你会想要条件地渲染元素。
例如,只显示针对移动设备的特定菜单。
为了实现此功能,您可以使用反应性$mq属性,该属性可以在组件的每个实例中访问。
1<template>
2 <mobile-menu v-if="$mq === 'mobile'"></mobile-menu>
3</template>
如果您为移动定义了分布点为450像素,则此组件将为屏幕大小高达450px。
「vue-mq」还提供这个语法的缩写,其中包含一个作为条件插槽的全球「mq-layout」组件:
1<template>
2 <mq-layout mq="mobile">
3 <mobile-menu></mobile-menu>
4 </mq-layout>
5 <mq-layout mq="tablet+">
6 <desktop-menu></desktop-menu>
7 </mq-layout>
8</template>
注意平板分段名称之后的加值符号(+) 这就指示vue-mq瞄准分段和所有较大的分段。
使用vue-mq与 Prop 值
另一个非常常见的用例是根据屏幕大小计算不同的值。
例如,假设您想要显示响应式元素网格:
- 在手机上你想要 2 列
- 在平板电脑上你想要 3 列
- 在笔记本电脑上你想要 4 列
换句话说,你只需要将根据屏幕大小不同的值传递给相同的网格组件,它将有责任显示正确的列数。
「vue-mq」提供了一个全球性过滤器,用于使用声明规则将差点绘制到值:
1<template>
2 <grid-component :column="$mq | mq({
3 phone: 2,
4 tablet: 3,
5 laptop: 4
6 })">
7 </grid-component>
8</template>
请记住,这个插件正在实施移动第一方法,如果不明确定义,则值将默认为最接近的小断点值。
如果您错过了平板电脑规则(‘平板电脑: 3’),它将返回平板电脑屏幕大小的电话规则,并显示 2 个列。
同样,如果您需要更复杂的值,请将其移动到一个计算的支架:
1<template>
2 <responsive-title>{{ displayText }}</responsive-title>
3</template>
4
5<script>
6export default {
7 computed: {
8 displayText() {
9 return this.$mq === 'mobile'
10 ? 'You are on a mobile device'
11 : 'You are on a larger device'
12 }
13 }
14}
15</script>
此代码将显示你在移动设备上或你在更大的设备上,取决于你的屏幕大小。
使用vue-mq与响应性类
有时,你也想通过CSS快速更改风格。
下面是一个单个文件组件的例子:
1<template>
2 <h1 class="responsive-title" :class="$mq">
3 Responsive Title
4 </h1>
5</template>
6
7<style>
8 .responsive-title.mobile { font-size: 1em; }
9 .responsive-title.desktop { font-size: 3em; }
10</style>
此代码将根据您的屏幕大小添加一个移动或桌面类元素。
应用其他图书馆
以下是与其他库相结合的先进用途:
结论
在本文中,您探索了可用于媒体查询的vue-mq插件的功能。
vue-mq为常见用例提供缩写,而其灵活性允许您随心所欲创作媒体查询。
如果您想了解有关 Vue.js 的更多信息,请参阅 我们的 Vue.js 主题页面以获取练习和编程项目。