S Svelora

Quick Example

useMediaQuery Usage

ตัวอย่าง import และการใช้งานแบบสั้นสำหรับหน้า `use-media-query`

Code

                <script lang="ts">
 import { useMediaQuery } from 'svelora';

 const isDesktop = useMediaQuery('(min-width: 1024px)');
</script>

<p>{isDesktop.current ? 'Desktop' : 'Mobile'}</p>

useMediaQuery

Reactive media query hook. Tracks whether a CSS media query matches in JavaScript.

Basic

Resize the browser window to see values change in real time.

Mobile: false Tablet: false Desktop: false

Current Breakpoint

Desktop > 1025px

User Preferences

Detect OS-level user preferences for dark mode, motion, and orientation.

Color Scheme

Light mode

light

Motion

Normal

normal

Orientation

Portrait

portrait

Custom Query

Supports reactive query strings via getter functions.

(min-width: 768px) = false

Real World: Responsive Layout

Switch between layouts based on viewport. Resize the window to see the layout change.

Card 1

Desktop: grid layout

Card 2

Desktop: grid layout

Card 3

Desktop: grid layout