SvelteKit responsive helper

Tired of writing complicated media queries ? SvelteKit windiow directives can help you simplifying them programtically. With the help of this layout component ViewoirtSettingsCatcher component and its associated store BiewportSettingsStore, they are presented in this topic.

Grabbing viewportportinner dimensions

Very simple use of svlete:window directive's bindings:

Registering inside store

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

the associated computation store

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 }

simple usage

Just import ViewportSettingsStore in your componentr

Et voilà... That's done.

The above is the detailed content of SvelteKit responsive helper. For more information, please follow other related articles on the PHP Chinese website!