Vuetify - 更改断点大小答案

【问题标题】：Vuetify - Change breakpoint sizesVuetify - 更改断点大小
【发布时间】：2020-12-12 13:34:49
【问题描述】：

我正在寻找 Vuetify JS 断点的变化，原来的样子：

超小 xs 小到大手机

Small sm 中小型平板 600px >

中 md 大平板到笔记本电脑 960px >

大 lg 桌面 1264px >

超大 xl 4k 和超宽 > 1904px*

https://vuetifyjs.com/en/components/grids/#usage

我需要将Large Lg Desktop改为1366，如何制作？这应该允许我将 vuetify 类用于像这样的断点 $vuetify.breakpoint.

{
  // Breakpoints
  xs: boolean
  sm: boolean
  md: boolean
  lg: boolean
  xl: boolean

  // Conditionals
  xsOnly: boolean
  smOnly: boolean
  smAndDown: boolean
  smAndUp: boolean
  mdOnly: boolean
  mdAndDown: boolean
  mdAndUp: boolean
  lgOnly: boolean
  lgAndDown: boolean
  lgAndUp: boolean
  xlOnly: boolean

  // true if screen width < mobileBreakpoint
  mobile: boolean
  mobileBreakpoint: number

  // Current breakpoint name (e.g. 'md')
  name: string

  // Dimensions
  height: number
  width: number

  // Thresholds
  // Configurable through options
  {
    xs: number
    sm: number
    md: number
    lg: number
  }

  // Scrollbar
  scrollBarWidth: number
}

请帮帮我，因为我不知道怎么改，也不想用Vuetify创建自己的断点系统...

【问题讨论】：

标签： vue.js vuetify.js breakpoints

【解决方案1】：

您可以阅读 vuetify 文档的这一部分，它有一个关于如何修改网格断点的完整示例：

modify vuetify breakpoints

在您的情况下，您可能有：

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

export default new Vuetify({
  breakpoint: {
    thresholds: {
      xs: 600,
      sm: 960,
      md: 1366,
      lg: 1904,
    },
  },
})

您可能还需要在 css 帮助程序类中实现这些更改，上面提供的链接中有提示。

【讨论】：