[vue]Vuetify기초 Breakpoints & Visibility정리 (3)

화면 사이즈에 따른 버튼 표시

 

<div class="home">
<h1>HomePage</h1>
	<v-btn class="hidden-md-and-down">1</v-btn>
	<v-btn class="hidden-md-and-up">2</v-btn>
	<v-btn class="hidden-sm-only">3</v-btn>
</div>
</template>
<script>

export default {};

</script>

 

 

 

 

https://vuetifyjs.com/en/framework/breakpoints#breakpoints

Breakpoints — Vuetify.js

Material Design Viewport BreakpointsDeviceCodeTypesRange

phone_iphoneExtra small	xs	small to large handset	< 600px
tabletSmall	sm	small to medium tablet	600px > < 960px
laptopMedium	md	large tablet to laptop	960px > < 1264*
desktop_windowsLarge	lg	desktop	1264 > < 1904px*
tvExtra large	xl	4k and ultra-wides	> 1904px*