SvelteKit レスポンシブ ヘルパー

複雑なメディアクエリを書くのにうんざりしていませんか? SvelteKit ウィンドウ ディレクティブは、プログラムでウィンドウ ディレクティブを簡素化するのに役立ちます。このレイアウト コンポーネント ViewoirtSettingsCatcher コンポーネントとその関連ストア BiewportSettingsStore を利用して、これらをこのトピックで説明します。

ビューポートの内部寸法の取得

svlete:window ディレクティブのバインディングの非常に簡単な使用法:

<!-- ViewportSettingsCatchr.svelte -->
<script lang="ts">
    let innerWidth: number = 1600
    let innerHeight: number = 1200
</script>

<svelte:window bind:innerWidth vind:nnerHeight />

店内での登録

$: ViewportSettingsStore.register ({ innerWidth, innerHeight })

関連する計算ストア

import { writable} from 'svelte/store'
const { subscribe, update  } = writable ({
    innerWidth: 1600, 
    innerHeight: 1200,
    ratio: 16/12, 
    orientation: 'landscape',   
    wide: false
})

function register ({ innerWidth, innerHeight }) {
    const ratio = innerWidth / innerHeight
    const orientation = ratio >= 1 ? 'landscape' : 'portrait'
    const wide = (ratio > 2) || (ratio < 0.5)

    update ((state) => {
        return {
            innerWidth, 
            innerHeight,
            orientation,
            ratio,
            wide
        }
    })
}

export const ViewportSettingsStore = {
    subscribe, register 
}

簡単な使い方

コンポーネントに ViewportSettingsStore をインポートするだけです

<div class:wide={ $ViewportSettingsStore.orientation = === 'landscape' } />

さあ...これで完了です。

以上がSvelteKit レスポンシブ ヘルパーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。