css 样式取决于不同的断点

Question

有没有办法根据当前断点的大小动态更改不同的 css 样式。就像 windows 在 xs 上是当前的 size/position/color 不同于 md 等等....

Answer 1

对于 vuetify 实用程序 classes，您在 class 名称中插入断点。 pa-2 默认为 xs 及以上，要将其从 md 断点向上更改为 pa-4，您将 pa-2 和 pa-md-4 应用于您的元素.对于 spacing, text, colors 的所有其他预定义实用程序 classes 也是如此

为了在vue中应用自己的classes而无需重复每个组件中的断点设置（和duplicating/decentralising断点管理），您可以：

Set classes dynamically 计算属性 returns 一串 classes 基于 this.$vuetify.breakpoint

<template>
  <div :class="userCardClasses" />
</template>

<script>
export default {
  ...
  computed: {
    userCardClasses() { 
      if (this.$vuetify.breakpoint.mdAndUp) return 'userCard userCard--md'
      // You can check the value of the helpers (mdAndUp) or write a switch/case for this.$vuetify.breakpoint.name
      return 'userCard userCard--xs'
    }
  }
}
</script>

<style>
.userCard {
  padding: 8px;
}

.userCard--xs {
  background-color: blue;
}

.userCard--md {
  background-color: red;
}
</style>

Import Vuetify breakpoint variables 在您的组件中并在编写媒体查询时使用它们。

<style lang="scss">
  @import '~vuetify/src/styles/styles.sass';

  .custom-class {
    display: block
  }

  @media #{map-get($display-breakpoints, 'md-and-down')}
    .custom-class {
      display: none;
    }
</style>

css 样式取决于不同的断点

css style depend on differrent breakpoints

javascript

vue.js

vuetify.js