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.
Very simple use of svlete:window directive's bindings:
$: 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 }
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!