CSS Media Queries Generator

With this tool, you can generate cross-browser compatible CSS media queries for devices of all sizes like desktops, laptops, tablets, mobiles, landscape-portrait modes, media types, etc. (bookmark for quick reuse)

Click sidebar options to generate CSS Media Queries »

  /* Mobile First i.e Smaller to Larger Devices */

  /* X-Small devices (portrait phones, less than 576px) */

  /* Small devices (landscape phones, 576px and up) */
  @media (min-width: 576px) { ... }

  /* Medium devices (tablets, 768px and up) */
  @media (min-width: 768px) { ... }

  /* Large devices (desktops, 992px and up) */
  @media (min-width: 992px) { ... }

  /* X-Large devices (large desktops, 1200px and up) */
  @media (min-width: 1200px) { ... }

  /* XX-Large devices (larger desktops, 1400px and up) */
  @media (min-width: 1400px) { ... }


  /* Desktop First i.e Larger to Smaller Devices */

  /* XX-Large devices (larger desktops) */
  /* No media query since the xxl breakpoint has no upper bound on its width */

  /* X-Large devices (large desktops, less than 1400px) */
  @media (max-width: 1399.98px) { ... }

  /* Large devices (desktops, less than 1200px) */
  @media (max-width: 1199.98px) { ... }

  /* Medium devices (tablets, less than 992px) */
  @media (max-width: 991.98px) { ... }

  /* Small devices (landscape phones, less than 768px) */
  @media (max-width: 767.98px) { ... }

  /* X-Small devices (portrait phones, less than 576px) */
  @media (max-width: 575.98px) { ... }

All Devices

  • Mobile first and desktop first for all devices
  • Mobile First / Smaller to Larger
  • Desktop First / Larger to Smaller

Orientation

  • Landscape
  • Portrait

Media Types

  • All - Used for all media type devices
  • Print - Used for printers
  • Screen - Used for computer screens, tablets, smart-phones etc.
  • Speech - Used for screenreaders that "reads" the page out loud

Phones and handhelds

  • iPhone
  • Galaxy Phones
  • HTC Phones
  • Google Pixel
  • Nexus Phones
  • WindowsPhone

Laptops

  • Non Retina
  • Retina

Tablets

  • iPad
  • Galaxy Tablets
  • Nexus Tablets
  • Kindle Fire

Others

  • Override all your hover rules for mobile devices

CSS Media Queries Generator is a simple tool that you can use to generate media queries for your web-based projects to target web-browsers of devices of all sizes like desktops, laptops, tablets, mobiles, landscape-portrait modes, and media types.

What is the mobile-first approach in CSS Media Queries? - Mobile-first is when we start by writing our CSS for mobile devices and then use media queries to add in styling for larger screen sizes.

What is the desktop-first approach in CSS Media Queries? - Desktop-first is when we start by writing our CSS for desktop devices and then use media queries to add in styling for smaller screen sizes.

It is recommended to bookmark it on your web browsers to quickly revisit and reuse it when needed for better productivity at work.

Please share these tools with your friends and colleagues. Also, it will be great if you can recommend these tools in your blogs if you have one. Thank You :-)

Follow these simple steps to get the best results with this tool.

Step 1 - Click and select the media-query-labels from the right-side panel.

Step 2 - Copy the CSS by clicking the blue underlined button and apply it to your CSS files.

Now, save this tool or bookmark it on your web browser to revisit it quickly when needed. Thank you!

webdevpuneet.com © 2021 | hosted by Bluehost (web hosting)