Responsive Design

Pixel Vue 3 support responsive design by using css() utility function that lets you write clean, responsive, and type-safe styles directly in your code. Pixel Vue 3 comes with 4 predefined breakpoints:

Breakpoint	Min Width (em)	Min Width (px)	Description
base	—	—	Default (applies to all screen sizes)
sm	22.5em	360px	Small screens (e.g., phones)
md	48em	768px	Medium screens (e.g., tablets)
lg	64em	1024px	Large screens (e.g., laptops)
xl	80em	1280px	Extra-large screens (e.g., desktops)

ℹ️ base acts as the default style, used before any breakpoint overrides apply.

Example: Responsive backgroundColor

<script setup lang="ts">
  import {css } from '@mekari/pixel3'
</script>

<template>
  <div
    :class="css({
      backgroundColor: {
        base: 'orange.500', // default
        sm: 'lime.100',     // ≥ 22.5em
        md: 'fuchsia.100',  // ≥ 48em
        lg: 'leaf.100',     // ≥ 64em
        xl: 'dark'          // ≥ 80em
      }
    })"
  >
    Text
  </div>
</template>

Result Overview

Screen Width	Background Color
< 22.5em	orange.500
≥ 22.5em	lime.100
≥ 48em	fuchsia.100
≥ 64em	leaf.100
≥ 80em	dark

---

Simplify With Array Syntax

Pixel Vue 3 also accepts arrays as value.

<script setup lang="ts">
  import {css } from '@mekari/pixel3'
</script>

<template>
  <div
  :class="css({
    backgroundColor: [
      'orange.500',
      'lime.100',
      'fuchsia.100',
      'leaf.100',
      'dark']
  })">
  Text
</div>
</template>

---