On this page

breakpoints

Breakpoint prefix	Minimum Maximum	CSS
`min_sm`	640px	`@media (min-width: 640px) { ... }`
`min_md`	768px	`@media (min-width: 768px) { ... }`
`min_lg`	1024px	`@media (min-width: 1024px) { ... }`
`min_xl`	1280px	`@media (min-width: 1280px) { ... }`
`min_2xl`	1536px	`@media (min-width: 1536px) { ... }`
`max_sm`	640px	`@media (max-width: 640px) { ... }`
`max_md`	768px	`@media (max-width: 768px) { ... }`
`max_lg`	1024px	`@media (max-width: 1024px) { ... }`
`max_xl`	1280px	`@media (max-width: 1280px) { ... }`
`max_2xl`	1536px	`@media (max-width: 1536px) { ... }`

Wrapper concept

elter's mediaQuery uses the same wrapper format as conventional CSS.
This makes it easy to transition from CSS.

Write and compile

Take a look at the media queries in compare them.
If you wrap a property and selector, the selector will be split and output.

Something.tsx

import elter, { max_md } from 'elter';
 
const css = elter.create({
    logo: {
      left: 400,
      top: 12,
      [max_md]: {
        left: 6,
        top: 6,
      },
    },
});
 
elter.global({
  [max_md]: {
    body: {
      width: '100%',
      padding: '120px 24px',
      fontSize: 12,
    },
    h1: {
      color: 'var(--color-heading)',
      padding: 0,
      margin: 0,
      fontSize: '20px',
      fontWeight: 400
    },
    h2: {
      color: 'var(--color-heading)',
      fontSize: '18px',
      fontWeight: '400',
    },
  },
});

Best Practices

To appear multiple times MediaQuery is the only css that can achieve dry code.
It is recommended to change one value to all.

lib/media.ts

import { max_md } from 'elter'
export const mobile = max_md
export const medium = '@media (min-width: 768px) and (max-width: 1536px)'