web-dev-qa-db-ja.com

ビューポートに基づいてVuetifyのフォントサイズを変更しますか？

タイトルがあります：

<v-card-text style="font-size:5em">
    Some Heading Here
</v-card-text>

ビューがXSの場合、フォントサイズを3emに設定したいと思います。今、私はそれを次のように複製しました：

<v-card-text hidden-xs-only style="font-size:5em">
    Some Heading Here
</v-card-text>
<v-card-text visible-xs-only style="font-size:3em">
    Some Heading Here
</v-card-text>

ただし、この重複を避けてCSSのみで問題を解決したいのですが、独自の@mediaローカル.vueファイル内のクエリ。それは可能ですか？

あるいは、フォントサイズを直接指定したり、異なる要素を完全に指定する代わりに、事前定義されたクラスを使用しても問題ありません。何かのようなもの <h3> XSであるが<h2>他のビューポート。

cssvue.jsviewportvuetify.js
12
ierdna

私もこの謎を解決しようとしてきました。さまざまなデバイスサイズの単純なスタイルの変更を処理するためにjavascriptに到達するのは大変なことです。

結局のところ、VuetifyはStylusを利用してブレークポイントをStylus変数に割り当てるため、異なるブレークポイントのカスタムCSSルールの生成は非常に簡単です。当然、この変数はカスタムのvueコンポーネントとスタイルファイルで使用できます（スタイラスをコンパイルするための適切なプリプロセッサセットアップがある場合）。

以下は、物事をよりよく理解するのに役立つリソースです。

  1. プリプロセッサのセットアップ：

    • https://vuetifyjs.com/en/framework/theme#setup-stylus-loader-with-webpack
    • 私の場合、Nuxtを使用することで、スタイラスのプリプロセッサセットアップが既にセットアップされています。しかし、このアプローチが機能するためには、スタイラスをコンパイルできることを確認する必要があります。

  2. スタイラス変数の変更-Vuetify：

  3. スタイラス@mediaクエリ- http://stylus-lang.com/docs/media.html

ご覧のとおり、$ display-breakpointsスタイラスオブジェクトはあなたの新しい親友です！

すべてを煮詰めると、Vue単一ファイルコンポーネントで得られるものは次のとおりです。

<template>
  <v-layout column justify-center align-center>
    <v-flex xs12 sm8 md6>
      <v-card>
        <v-card-title class="custom-selector headline">
          Welcome to the Vuetify + Nuxt.js template
        </v-card-title>
      </v-card>
    </v-flex>
  </v-layout>
</template>

<script>
export default {
  // ...
}
</script>

<style lang="styl">
.custom-selector
  font-size 3em
  @media $display-breakpoints.xs-only
    font-size 2em
  @media $display-breakpoints.lg-and-up
    font-size 5em
</style>

上記のコードで、<v-card-title>コンポーネントのフォントサイズを変更しているのは、スタイラスメディアクエリで対象を指定し、$ display-breakpointsオブジェクトを使用して目的のブレークポイントを識別することに注意してください。

すべてのブレークポイントですべてのオプションを生成するUIフレームワークがないことの利点は、ロードするファイルがはるかに小さいことです。 Vuetify + Stylusは、カスタム@mediaクエリの作成を最も簡単で効率的なアプローチにする軽量なアプローチのようです。

6
CICSolutions

ビューポートに基づいてクラスを適用できます

:class="{'subheading': $vuetify.breakpoint.xs}"
11
Igor Kokotko

Vuetify自体が提供および追跡するBreakpointオブジェクトを使用できます。引用 ドキュメント ：

Vuetifyは、使用可能なブレークポイントをアプリケーション内からアクセス可能なオブジェクトに変換します。これにより、ビューポートのサイズに基づいて特定のプロパティと属性を割り当て/適用できます。

同じdocpageで1つの可能な（そして直接的な方法）が言及されています-計算プロパティを使用してフォントサイズを計算します：

computed: {
  fontSize() {
    switch (this.$vuetify.breakpoint.name) {
      case 'xs': return '3em';
      default: return '5em';
    }
  }
}

...テンプレートで直接使用します。もちろん、代わりに動的クラス名でも同じことができます-$vuetify.breakpoint.xsOnly、 例えば。

9
raina77ow