give me all the (empty) media queries commonly used for all widescreen 4k and mobile widths
Absolutely, let’s lay down a solid media query skeleton for modern responsive design—especially targeting mobile, tablet, desktop, and those spicy 4K and ultra-wide screens.
Here’s a smart set of empty media queries you can copy-paste and fill in as needed:
/* ===== MOBILE FIRST APPROACH ===== */
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
/* XS */
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
/* SM */
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
/* MD */
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
/* LG */
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) and (max-width: 1599.98px) {
/* XL */
}
/* ===== 4K AND ULTRA-WIDE ===== */
/* 2K Displays (typically 1600px - 1919px) */
@media (min-width: 1600px) and (max-width: 1919.98px) {
/* 2K */
}
/* 4K Displays (1920px and up) */
@media (min-width: 1920px) and (max-width: 2559.98px) {
/* 4K */
}
/* Ultra-wide Displays (2560px and up) */
@media (min-width: 2560px) and (max-width: 3839.98px) {
/* Ultra-Wide (WQHD, UWQHD) */
}
/* 5K+ Displays (3840px and up) */
@media (min-width: 3840px) {
/* 5K and beyond, hello retina walls */
}
@media (orientation: landscape) and @media (hover: hover) for interaction-based tweaks too.Want me to turn this into a Sass mixin set or utility-first class system?
add landscape orientation to this list
Absolutely—time to give our layout some landscape love! Let’s add media queries for landscape orientation across the same breakpoints. These are great for tablets turned sideways, foldables, and laptop users doing yoga with their screens.
Here’s the full upgraded media query set, including landscape variants:
/* ===== MOBILE FIRST APPROACH ===== */
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
/* XS Portrait */
}
@media (max-width: 575.98px) and (orientation: landscape) {
/* XS Landscape */
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
/* SM Portrait */
}
@media (min-width: 576px) and (max-width: 767.98px) and (orientation: landscape) {
/* SM Landscape */
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
/* MD Portrait */
}
@media (min-width: 768px) and (max-width: 991.98px) and (orientation: landscape) {
/* MD Landscape */
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
/* LG Portrait */
}
@media (min-width: 992px) and (max-width: 1199.98px) and (orientation: landscape) {
/* LG Landscape */
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) and (max-width: 1599.98px) {
/* XL Portrait */
}
@media (min-width: 1200px) and (max-width: 1599.98px) and (orientation: landscape) {
/* XL Landscape */
}
/* ===== 4K AND ULTRA-WIDE ===== */
/* 2K Displays (1600px - 1919px) */
@media (min-width: 1600px) and (max-width: 1919.98px) {
/* 2K Portrait */
}
@media (min-width: 1600px) and (max-width: 1919.98px) and (orientation: landscape) {
/* 2K Landscape */
}
/* 4K Displays (1920px - 2559px) */
@media (min-width: 1920px) and (max-width: 2559.98px) {
/* 4K Portrait */
}
@media (min-width: 1920px) and (max-width: 2559.98px) and (orientation: landscape) {
/* 4K Landscape */
}
/* Ultra-wide Displays (2560px - 3839px) */
@media (min-width: 2560px) and (max-width: 3839.98px) {
/* Ultra-Wide Portrait */
}
@media (min-width: 2560px) and (max-width: 3839.98px) and (orientation: landscape) {
/* Ultra-Wide Landscape */
}
/* 5K+ Displays (3840px and up) */
@media (min-width: 3840px) {
/* 5K+ Portrait */
}
@media (min-width: 3840px) and (orientation: landscape) {
/* 5K+ Landscape */
}
You now have a responsive framework that can handle everything from a flip phone to a control room monitor wall. Want a JS snippet to dynamically log active breakpoint and orientation in real-time?
add to the list most commonly used height-derived breakpoints
Ooh, going vertical! 💡 Including height-based breakpoints is clutch when dealing with foldables, split screens, mobile browsers with dynamic toolbars, or immersive UI that changes based on vertical real estate (think hero sections, sticky footers, fullscreen modals).
Here’s your now-supercharged, horizontal + vertical + landscape-aware media query toolkit:
/* Short screens (phones, split-view, small laptops) */
@media (max-height: 599.98px) {
/* Short: <= 600px */
}
/* Medium-height screens (common for landscape tablets, laptops) */
@media (min-height: 600px) and (max-height: 799.98px) {
/* Medium Short: 600px - 800px */
}
/* Standard-height screens (most laptops and tablets) */
@media (min-height: 800px) and (max-height: 1023.98px) {
/* Medium Tall: 800px - 1024px */
}
/* Tall screens (desktops, some tablets in portrait) */
@media (min-height: 1024px) and (max-height: 1439.98px) {
/* Tall: 1024px - 1440px */
}
/* Extra-tall screens (4K+ monitors, ultra-tall displays) */
@media (min-height: 1440px) and (max-height: 2159.98px) {
/* XL Tall */
}
/* Ultra-tall screens (5K+, vertical signage, some portrait 4Ks) */
@media (min-height: 2160px) {
/* 5K Vertical Champs */
}
Want to get super precise? You can even do combos like:
@media (max-height: 600px) and (orientation: landscape) {
/* Short Landscape (like a phone on its side) */
}
You could introduce aspect-ratio queries too:
@media (aspect-ratio: 16/9) { }
@media (max-aspect-ratio: 3/4) { }
Let me know if you’d like this as a modular SCSS mixin set, or integrated into a utility-first CSS system like Tailwind or UnoCSS.
integrate with tailwind
Ah yes, Tailwind time—where media queries become utility classes and breakpoints turn into magic keys 🧙♂️✨
By default, Tailwind does not include all these height, 4K, or ultra-wide breakpoints out of the box—but we can extend Tailwind’s theme.screens config to include:
// tailwind.config.js
module.exports = {
theme: {
extend: {
screens: {
// WIDTH-based breakpoints
'xs': '375px', // iPhone SE and tiny screens
'sm': '576px',
'md': '768px',
'lg': '992px',
'xl': '1200px',
'2k': '1600px',
'4k': '1920px',
'ultra': '2560px',
'5k': '3840px',
// HEIGHT-based breakpoints (prefix with h- to avoid conflicts)
'h-sm': { 'raw': '(max-height: 599.98px)' },
'h-md': { 'raw': '(min-height: 600px) and (max-height: 799.98px)' },
'h-lg': { 'raw': '(min-height: 800px) and (max-height: 1023.98px)' },
'h-xl': { 'raw': '(min-height: 1024px) and (max-height: 1439.98px)' },
'h-2k': { 'raw': '(min-height: 1440px) and (max-height: 2159.98px)' },
'h-5k': { 'raw': '(min-height: 2160px)' },
// Orientation-specific
'landscape': { 'raw': '(orientation: landscape)' },
'portrait': { 'raw': '(orientation: portrait)' },
}
}
}
}
You're on 4K, wow 🤯
More padding on tall screens
🌄 Landscape view
Wide layout power!
If you want to make sure Tailwind can apply these screen sizes to all classes, you’re good to go. Tailwind automatically picks up anything added to screens.
Want me to drop a Tailwind plugin that makes these available as full utility sets (like .h-screen-h-xl, .text-4k-lg, etc.) or combine with aspect-ratio and dark mode detection?