Media Queries

Media queries are a core feature of CSS that allow developers to apply styles conditionally, based on a device's characteristics—like width, height, resolution, or orientation. They are essential to responsive web design, enabling websites to adapt seamlessly to different screen sizes and devices.

How Media Queries Work

Media queries use the @media rule to specify breakpoints, allowing styles to change based on the current environment.

css
CopyEdit
/* Base styles */
body {
  font-size: 16px;
}
/* Media query for screens wider than 768px */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

You can combine multiple conditions using logical operators like and, not, and only.

Common Use Cases

• Adjusting layouts for mobile, tablet, and desktop screens

• Hiding or showing elements based on screen size

• Changing typography or spacing responsively

• Supporting light and dark mode preferences

Why Media Queries Matter

Media queries are the foundation of adaptive and responsive design. They ensure that users have a consistent and usable experience across all devices, without needing multiple versions of the same site.

What is Superflex.ai?

Instead of handing designs off to developers or rewriting components from scratch, Superflex turns your Figma files directly into clean, modern React code. It understands structure, style, and intent—so what you design is exactly what gets built. No translation layer, no back-and-forth, just seamless execution from idea to interface.