Skip to content
Manyone Library

Preset Aspect Media Query

UnoCSS preset for aspect ratio media queries.

Source Code

Installation

Since our @manyone packages are private on npmjs you must authenticate to install it with npm login.

If you’re not part of the Manyone organisation on npmjs.com, reach out to Caroline, Patrik or Lau.

pnpm add @manyone/unocss

Configuration

uno.config.ts
import { defineConfig } from 'unocss';
import { presetAspectMediaQuery } from '@manyone/unocss';


export default defineConfig({
  presets: [
    presetAspectMediaQuery(),
    // ...other presets
  ],
});

Usage

The variants are named using the following pattern: {type}-aspect-{width}-{height}.

<div class="min-aspect-16-9:text-blue">
  Blue text on screens with a minimum aspect ratio of 16:9.
</div>
<div class="max-aspect-1-1:text-red">
  Red text on screens with a maximum aspect ratio of 1:1.
</div>
<div class="min-aspect-1.5-2:text-green">
  Green text on screens with a minimum aspect ratio of 1.5:2.
</div>

Grouping with variant group transformer

By using the variant group transformer groups of utility classes can easily be applied on the same aspect ratio breakpoint.

<div class="min-aspect-4-3:(bg-red text-blue)">
  Blue text and red background on screens with a minimum aspect ratio of 4:3.
</div>

Options

This preset doesn’t have any options.