Media Queries
Powerful SCSS mixins for responsive design, device capabilities, and user preferences.
Overview
NuvoUI provides a comprehensive set of media query mixins to handle:
- Responsive breakpoints
- Device capabilities
- User preferences
- Theme modes
- Accessibility features
- Modern viewport features
Breakpoint Queries
Control layout changes across different screen sizes:
| Mixin | Description | Usage |
|---|---|---|
@include NuvoUI.media-up(md) | Applies from this breakpoint up | 768px and larger |
@include NuvoUI.media-down(md) | Applies from this breakpoint down | 767.98px and smaller |
@include NuvoUI.media-between(sm, lg) | Applies between two breakpoints | 640px to 1023.98px |
@include NuvoUI.media-only(md) | Applies only at this breakpoint | 768px to 1023.98px |
Custom Values in Media Queries
In addition to the predefined breakpoints, you can use custom values in your media queries:
| Example | Description |
|---|---|
@include NuvoUI.media-up(10rem) | Applies for viewport widths of 10rem and larger |
@include NuvoUI.media-up(160px) | Applies for viewport widths of 160px and larger |
@include NuvoUI.media-up(50) | Number values are automatically converted to pixels (50px) |
Combining Custom and Predefined Values
You can combine custom values with predefined breakpoints in between-style queries:
@include NuvoUI.media-between(sm, lg)
Applies between small and large breakpoints
@include NuvoUI.media-between(200, 2xl)
Applies between 200px and the 2xl breakpoint
@include NuvoUI.media-between(sm, 50rem)
Applies between the small breakpoint and 50rem
Important: When using
media-between, always ensure the smaller value comes first. The mixin expects values in ascending order.
SCSS Usage
Theme Modes
Handle light, dark, and system theme preferences:
Theme Implementation
Device Capabilities
Detect and respond to device features and capabilities:
| Mixin | Description |
|---|---|
@include touch | Touch-capable devices |
@include fine-pointer | Precise pointing devices (mouse) |
@include landscape | Landscape orientation |
@include portrait | Portrait orientation |
Modern Features
Support for modern CSS features with fallbacks:
| Mixin | Description | Usage |
|---|---|---|
@include dvh | Dynamic viewport height with fallback | Handles mobile browser chrome |
@include aspect-ratio($ratio) | Modern aspect ratio support | Maintains proportional sizing |
@include safe-area-inset($property, $position) | Safe area insets for notched devices | Respects device cutouts |
SCSS Implementation
Accessibility Features
Media queries for accessibility preferences:
| Mixin | Description |
|---|---|
@include reduced-motion | Respects user's motion preferences |
@include high-contrast | Handles forced colors mode |
Print Media
Target print layouts:
Feature Support
Check for feature support:
Progressive Web App
Target specific PWA display modes:
Best Practices
Do
- Use mobile-first approach with media-up
- Consider user preferences and accessibility
- Test across different devices and contexts
- Provide appropriate fallbacks
- Use semantic breakpoint names
Avoid
- Over-complicating breakpoint logic
- Ignoring accessibility preferences
- Hard-coding pixel values
- Deeply nesting media queries
- Relying solely on device dimensions