Skip to content

Vuetify:Breakpoints

Display Breakpoints

Material Design Breakpoints:

Device

Code

Type

Range

Extra small

xs

Small to large phone

< 600px

Small

sm

Small to medium tablet

600px > < 960px

Medium

md

Large tablet to laptop

960px > < 1264px*

Large

lg

Desktop

1264px > < 1904px*

Extra large

xl

4k and ultra-wide

> 1904px*

  • -16px on desktop for browser scrollbar

Breakpoint service 

<!-- Vue Component -->

<template>
  <v-card :height="height">
    ...
  </v-card>
</template>

<script>
  export default {
    computed: {
      height () {
        switch (this.$vuetify.breakpoint.name) {
          case 'xs': return 220
          case 'sm': return 400
          case 'md': return 500
          case 'lg': return 600
          case 'xl': return 800
        }
      },
    },
  }
</script>

CSS/SCSS/SASS 에서 사용방법

SCSS: 

@import '~vuetify/src/styles/settings/_variables';

@media #{map-get($display-breakpoints, 'sm-and-down')} {
    .custom-class {
        display: block;
    }
}

SASS: 

.test
  color: green
  @media #{map-get($display-breakpoints, 'xs-only')}
    color: red!important
</style>

See also