🖥 Media Queries

These work as they do in CSS. We support the following:

• width
• min-width
• max-width
• height
• min-height
• max-height
• orientation
• prefers-color-scheme (See MDN, awaiting React Native support)
• platform

The platform parameter queries whatever Platform.OS returns—in regular React Native, this’ll be ios or android (both lowercase).

const Title = cssta(Text)`
  @media (platform: ios) {
    font-family: "San Francisco";
  }
`;

Just like in CSS, rules can be nested in media queries.

const Title = cssta(Text)`
  font-size: 12px;

  [@large] {
    font-size: 18px;
  }

  @media (min-width: 600px) {
    font-size: 24px;

    [@large] {
      font-size: 48px;
    }
  }
`;

You can also combine queries the same way as regular CSS.

const Title = cssta(Text)`
  @media (platform: ios) and (min-width: 600px) {
    font-family: "San Francisco Display";
  }
`;

We also support viewport units.

const Title = cssta(View)`
  width: 20vw;
`;