Vuetify 画面幅に基づいてフォントサイズを変更
Vuetify VuetifyvresizeThis article explains how to detect changes in screen size with Vuetify. In Vuetify, changes in screen size can be easily detected by simply writing vresize in the tag. The article provides a script that can be used to check the operation.
by JanitorOct 03, 2023
Jump Links
1. スクリプトを書く
Vuetifyで画面の大きさの変更を検知する方法です。Vuetifyの場合はv-resizeをタグに書くだけで簡単に画面の大きさの変更を検知してくれます。
Vuetifyで画面の大きさの変更を検知する方法です。Vuetifyの場合はv-resizeをタグに書くだけで簡単に画面の大きさの変更を検知してくれます。
1. スクリプトを書く
1. スクリプトを書く
下記のスクリプトで動作を確認できます。
下記のスクリプトで動作を確認できます。
<script setup>
var fontSize = reactive( { value: 0 } );
var windowWidth = reactive( { value: 0 } );
var onResize = ( e ) => {
windowWidth.value = window.innerWidth;
fontSize.value = 20 / 2000 * windowWidth.value > 20 ? 20 : 20 / 2000 * windowWidth.value;
}
</script>
<template>
<div
v-resize="onResize">
<div
:style="{ fontSize: fontSize.value + 'px' }">
windowWidth: {{ windowWidth.value }};
</div>
</div>
</template>
<script setup>
var fontSize = reactive( { value: 0 } );
var windowWidth = reactive( { value: 0 } );
var onResize = ( e ) => {
windowWidth.value = window.innerWidth;
fontSize.value = 20 / 2000 * windowWidth.value > 20 ? 20 : 20 / 2000 * windowWidth.value;
}
</script>
<template>
<div
v-resize="onResize">
<div
:style="{ fontSize: fontSize.value + 'px' }">
windowWidth: {{ windowWidth.value }};
</div>
</div>
</template>
生のjavascriptの場合は、イベントリスナーを追加するスクリプトが必要ですが、Vuetifyの場合はv-resizeを追加して、画面幅が変更されたときに実行したい関数を記載するだけで済みます。
フォントサイズの変更はスタイルのバインディングを使っています。
参考にさせて頂いたウェブサイトURL
https://vuetifyjs.com/en/directives/resize/
https://v2.ja.vuejs.org/v2/guide/class-and-style
生のjavascriptの場合は、イベントリスナーを追加するスクリプトが必要ですが、Vuetifyの場合はv-resizeを追加して、画面幅が変更されたときに実行したい関数を記載するだけで済みます。
フォントサイズの変更はスタイルのバインディングを使っています。
参考にさせて頂いたウェブサイトURL
https://vuetifyjs.com/en/directives/resize/
https://v2.ja.vuejs.org/v2/guide/class-and-style
Editors pick
Our other articles
Vuetify 画面幅に基づいてフォントサイズを変更
Vuetify VuetifyvresizeThis article explains how to detect changes in screen size with Vuetify. In Vuetify, changes in screen size can be easily detected by simply writing vresize in the tag. The article provides a script that can be used to check the operation.
by JanitorOct 03, 2023
Jump Links
1. スクリプトを書く
Vuetifyで画面の大きさの変更を検知する方法です。Vuetifyの場合はv-resizeをタグに書くだけで簡単に画面の大きさの変更を検知してくれます。
Vuetifyで画面の大きさの変更を検知する方法です。Vuetifyの場合はv-resizeをタグに書くだけで簡単に画面の大きさの変更を検知してくれます。
1. スクリプトを書く
1. スクリプトを書く
下記のスクリプトで動作を確認できます。
下記のスクリプトで動作を確認できます。
<script setup>
var fontSize = reactive( { value: 0 } );
var windowWidth = reactive( { value: 0 } );
var onResize = ( e ) => {
windowWidth.value = window.innerWidth;
fontSize.value = 20 / 2000 * windowWidth.value > 20 ? 20 : 20 / 2000 * windowWidth.value;
}
</script>
<template>
<div
v-resize="onResize">
<div
:style="{ fontSize: fontSize.value + 'px' }">
windowWidth: {{ windowWidth.value }};
</div>
</div>
</template>
<script setup>
var fontSize = reactive( { value: 0 } );
var windowWidth = reactive( { value: 0 } );
var onResize = ( e ) => {
windowWidth.value = window.innerWidth;
fontSize.value = 20 / 2000 * windowWidth.value > 20 ? 20 : 20 / 2000 * windowWidth.value;
}
</script>
<template>
<div
v-resize="onResize">
<div
:style="{ fontSize: fontSize.value + 'px' }">
windowWidth: {{ windowWidth.value }};
</div>
</div>
</template>
生のjavascriptの場合は、イベントリスナーを追加するスクリプトが必要ですが、Vuetifyの場合はv-resizeを追加して、画面幅が変更されたときに実行したい関数を記載するだけで済みます。
フォントサイズの変更はスタイルのバインディングを使っています。
参考にさせて頂いたウェブサイトURL
https://vuetifyjs.com/en/directives/resize/
https://v2.ja.vuejs.org/v2/guide/class-and-style
生のjavascriptの場合は、イベントリスナーを追加するスクリプトが必要ですが、Vuetifyの場合はv-resizeを追加して、画面幅が変更されたときに実行したい関数を記載するだけで済みます。
フォントサイズの変更はスタイルのバインディングを使っています。
参考にさせて頂いたウェブサイトURL
https://vuetifyjs.com/en/directives/resize/
https://v2.ja.vuejs.org/v2/guide/class-and-style
Editors pick
Our other articles