简介

响应式设计是 Web 应用程序经常需要的功能。作为开发人员,我们必须支持各种设备和屏幕尺寸。 CSS 是用于简单用例和非常高效的性能方面的出色工具。但是,即使使用预处理器(SASS、PostCSS、LESS 等),管理复杂的媒体查询也可能会变得很麻烦。

得益于MatchMedia API,Vue.js 可以大大降低处理媒体查询和响应式设计的复杂性。它提供与基于组件的架构的无缝集成,保持简洁的声明和语义方法。

在本文中,您将探索vue-mq插件可用于媒体查询的功能。

先决条件

如果您想继续阅读本文,您将需要:

• 熟悉CSS 媒体查询。

• 对响应式设计有一定了解

• 并且熟悉移动优先方法。

警告: 此插件依赖 matchMedia API 来检测屏幕大小的变化。因此,对于较旧的浏览器和 Internet Explorer,您应该使用Paul Irish 的 matchMedia polyfill

本教程已使用 Node v15.8.0、npmv7.5.4、Vue v12.6.11 和vue-mqv1.0.1 进行了验证。

使用vue-mq

首先,要使用vue-mq,打开终端并导航到现有的 Vue 项目目录。然后,运行以下命令:

npm install vue-mq@1.0.1

接下来,使用您的代码编辑器,编辑您的 Vue 项目和import库:

import VueMq from 'vue-mq'

注册插件时定义自定义断点。键是断点,值是像素:

Vue.use(VueMq, {
  breakpoints: {
    sm: 450,
    md: 1250,
    lg: Infinity,
  }
})

在此示例中,定义了三个断点。sm表示“小屏幕”。md用于“中等屏幕”。lg表示“大屏幕”。

你也可以用设备或任何对你有意义的东西来命名你的断点:

Vue.use(VueMq, {
  breakpoints: {
    mobile: 450,
    tablet: 900,
    laptop: 1250,
    desktop: Infinity,
  }
})

在此示例中,定义了四个断点。mobile、tablet、laptop和desktop屏幕尺寸。

将vue-mq与条件渲染一起使用

在处理响应式设计时,您通常会希望有条件地渲染元素。

例如,仅为移动设备显示特定菜单。

为了实现该功能,您可以使用可在组件的每个实例中访问的响应式$mq属性。它的值将始终是当前断点。

<template>
  <mobile-menu v-if="$mq === 'mobile'"></mobile-menu>
</template>

该组件会在当前屏幕尺寸满足条件时渲染。如果您将“移动”的断点定义为 450 像素,则此组件将渲染最大为 450 像素的屏幕。

vue-mq还提供了此语法的简写,其中全局mq-layout组件充当条件槽:

<template>
  <mq-layout mq="mobile">
    <mobile-menu></mobile-menu>
  </mq-layout>
  <mq-layout mq="tablet+">
    <desktop-menu></desktop-menu>
  </mq-layout>
</template>

注意“tablet”断点名称后面的加号 (+)。这指示vue-mq以断点和所有较大的断点为目标。

将vue-mq与道具值一起使用

另一个非常常见的用例是根据屏幕尺寸计算不同的值。

例如,假设您要显示一个响应式网格项目:

移动设备上的* 需要 2 列

• 在您想要 3 列的平板电脑上

• 在您想要 4 列的笔记本电脑上

换句话说,你只需要根据屏幕大小将具有不同值的道具传递给完全相同的网格组件。它将负责显示正确的列数。

vue-mq提供了一个全局过滤器,用于将断点映射到值,使用声明性规则:

<template>
  <grid-component :column="$mq | mq({
    phone: 2,
    tablet: 3,
    laptop: 4
  })">
  </grid-component>
</template>

请记住,此插件强制执行移动优先方法。如果未明确定义,值将默认为最接近的较小断点值。

如果您省略了“平板电脑”规则 (tablet: 3),它将回退到“平板电脑”屏幕尺寸的“手机”规则并显示 2 列。

同样,如果您需要更复杂的值,请将其移动到computed属性中:

<template>
  <responsive-title>{{ displayText }}</responsive-title>
</template>

<script>
export default {
  computed: {
    displayText() {
      return this.$mq === 'mobile'
      ? 'You are on a mobile device'
      : 'You are on a larger device'
    }
  }
}
</script>

此代码将根据您的屏幕尺寸显示"You are on mobile device"或"You are on a larger device"。

将vue-mq与响应类一起使用

有时,您还想通过 CSS 快速更改样式。诀窍是使用断点名称作为要设置样式的元素的计算类。

这是一个带有单文件组件的示例:

<template>
  <h1 class="responsive-title" :class="$mq">
    Responsive Title
  </h1>
</template>

<style>
  .responsive-title.mobile { font-size: 1em; }
  .responsive-title.desktop { font-size: 3em; }
</style>

此代码将根据您的屏幕尺寸向元素添加“移动”或“桌面”类。

应用其他库

以下是与其他库结合使用的一些想法:

• portal-vue

• styletron-vue

结论

在本文中,您探索了vue-mq插件可用于媒体查询的功能。

vue-mq为常见用例提供简写,同时它的灵活性让您可以随心所欲地编写媒体查询。

如果您想了解有关 Vue.js 的更多信息,请查看我们的 Vue.js 主题页面以获取练习和编程项目。