Pembantu responsif SvelteKit

Bosan menulis pertanyaan media yang rumit ? Arahan windiow SvelteKit boleh membantu anda memudahkannya secara pemrograman. Dengan bantuan komponen reka letak ini komponen ViewoirtSettingsCatcher dan gedung yang berkaitan BiewportSettingsStore, ia dibentangkan dalam topik ini.

Merebut dimensi viewportinner

Penggunaan svlete:window directive bindings yang sangat mudah:

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

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

Mendaftar di dalam kedai

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

stor pengiraan yang berkaitan

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 
}

penggunaan mudah

Hanya import ViewportSettingsStore dalam komponen anda

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

Et voilà... Selesai.

Atas ialah kandungan terperinci Pembantu responsif SvelteKit. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!