{"id":86,"date":"2025-11-29T07:50:43","date_gmt":"2025-11-29T07:50:43","guid":{"rendered":"https:\/\/whatismyscreenresolution.info\/blog\/?p=86"},"modified":"2026-02-04T12:06:39","modified_gmt":"2026-02-04T12:06:39","slug":"css-media-queries-the-complete-guide-for-responsive-web-design","status":"publish","type":"post","link":"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/","title":{"rendered":"CSS Media Queries \u2014 The Complete Guide for Responsive Web Design"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>CSS Media Queries<\/strong> allow you to apply CSS rules only when certain conditions are met \u2014 such as screen width, device orientation, color scheme, or resolution.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">They\u2019re the foundation of <strong><a href=\"\/blog\/html-responsive-web-design\/\">responsive web design<\/a><\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Basic Syntax<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">@media (condition) {\n  \/* styles apply when condition is true *\/\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"784\" height=\"626\" src=\"https:\/\/whatismyscreenresolution.info\/blog\/wp-content\/uploads\/CSS-Media-Queries-for-Responsive-Web-Design.png\" alt=\"\" class=\"wp-image-90\" style=\"width:590px;height:auto\" srcset=\"https:\/\/whatismyscreenresolution.info\/blog\/wp-content\/uploads\/CSS-Media-Queries-for-Responsive-Web-Design.png 784w, https:\/\/whatismyscreenresolution.info\/blog\/wp-content\/uploads\/CSS-Media-Queries-for-Responsive-Web-Design-768x613.png 768w\" sizes=\"auto, (max-width: 784px) 100vw, 784px\" \/><\/figure>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/#Why_Media_Queries_Matter\" >Why Media Queries Matter<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/#Most_Common_Media_Queries\" >Most Common Media Queries<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/#Popular_Screen_Size_Breakpoints\" >Popular Screen Size Breakpoints<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/#Recommended_Breakpoints_to_Use\" >Recommended Breakpoints to Use:<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/#Media_Query_Types_and_Conditions\" >Media Query Types and Conditions<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/#1_Width-based_queries_most_common\" >1. Width-based queries (most common)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/#2_Orientation_Queries\" >2. Orientation Queries<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/#3_Dark_Mode_Queries\" >3. Dark Mode Queries<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/#4_High_DPI_Retina_Displays\" >4. High DPI \/ Retina Displays<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/#5_Hover_Pointer_Detection\" >5. Hover &amp; Pointer Detection<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/#Combining_Multiple_Conditions\" >Combining Multiple Conditions<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/#Mobile-First_vs_Desktop-First\" >Mobile-First vs Desktop-First<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/#Mobile_First_recommended\" >Mobile First (recommended)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/#Desktop_First\" >Desktop First<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/#Advanced_Media_Queries_Modern_CSS\" >Advanced Media Queries (Modern CSS)<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/#Container_Queries_2023\" >Container Queries (2023+)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/#Forced_Colors_Mode\" >Forced Colors Mode<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/#Reduced_Motion\" >Reduced Motion<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/#Best_Practices_for_Media_Queries\" >Best Practices for Media Queries<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/#Ready-to-Use_Media_Query_Boilerplate\" >Ready-to-Use Media Query Boilerplate<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Why_Media_Queries_Matter\"><\/span>Why Media Queries Matter<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Make your website usable on all screen sizes<\/li>\n\n\n\n<li>Control layouts for mobile, tablet, and desktop<\/li>\n\n\n\n<li>Customize typography, grids, menus<\/li>\n\n\n\n<li>Reduce complexity by applying CSS only when needed<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Most_Common_Media_Queries\"><\/span>Most Common Media Queries<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Start styling for small screens, then go up.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">\/* Phones *\/\n@media (min-width: 480px) {}\n\n\/* Tablets *\/\n@media (min-width: 768px) {}\n\n\/* Laptops *\/\n@media (min-width: 1024px) {}\n\n\/* Desktops *\/\n@media (min-width: 1280px) {}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Popular_Screen_Size_Breakpoints\"><\/span>Popular Screen Size Breakpoints<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Device<\/th><th>Breakpoint<\/th><\/tr><\/thead><tbody><tr><td>Small Phones<\/td><td>320px<\/td><\/tr><tr><td>iPhone (modern)<\/td><td>375px<\/td><\/tr><tr><td>Large Phones<\/td><td>414px<\/td><\/tr><tr><td>Tablets<\/td><td>600\u2013768px<\/td><\/tr><tr><td>Tablets Landscape<\/td><td>1024px<\/td><\/tr><tr><td>Laptops<\/td><td>1280px<\/td><\/tr><tr><td>Desktops<\/td><td>1440px<\/td><\/tr><tr><td>Full HD monitors<\/td><td>1920px<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Recommended_Breakpoints_to_Use\"><\/span>Recommended Breakpoints to Use:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">@media (max-width: 600px)  { \/* mobile *\/ }\n@media (min-width: 600px)  { \/* tablets *\/ }\n@media (min-width: 900px)  { \/* tablet landscape *\/ }\n@media (min-width: 1200px) { \/* laptop *\/ }\n@media (min-width: 1800px) { \/* large desktops *\/ }<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Media_Query_Types_and_Conditions\"><\/span>Media Query Types and Conditions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Width-based_queries_most_common\"><\/span>1. Width-based queries (most common)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Max-width<\/h4>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">@media (max-width: 600px) {\n  body { background: lightblue; }\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Min-width<\/h4>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">@media (min-width: 1024px) {\n  body { background: green; }\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Orientation_Queries\"><\/span>2. Orientation Queries<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Detects device position.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">@media (orientation: portrait) {\n  .image { height: 400px; }\n}\n\n@media (orientation: landscape) {\n  .image { height: 200px; }\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Dark_Mode_Queries\"><\/span>3. Dark Mode Queries<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">@media (prefers-color-scheme: dark) {\n  body { background: #111; color: #eee; }\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_High_DPI_Retina_Displays\"><\/span>4. High DPI \/ Retina Displays<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">@media (min-resolution: 2dppx) {\n  img { image-rendering: crisp-edges; }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Useful for:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Retina MacBooks<\/li>\n\n\n\n<li>Modern smartphones<\/li>\n\n\n\n<li>4K displays<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"5_Hover_Pointer_Detection\"><\/span>5. Hover &amp; Pointer Detection<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Great for touch vs mouse devices.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">@media (hover: none) {\n  a:hover { text-decoration: none; }\n}\n\n@media (pointer: coarse) {\n  \/* touch devices *\/\n  button { padding: 18px; }\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Combining_Multiple_Conditions\"><\/span>Combining Multiple Conditions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You can join them using <strong>and<\/strong>, <strong>or<\/strong>, <strong>not<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">@media (min-width: 768px) and (orientation: landscape) {\n  \/* tablet landscape *\/\n}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">@media (max-width: 600px), (orientation: portrait) {\n  \/* applies if either condition is true *\/\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Mobile-First_vs_Desktop-First\"><\/span>Mobile-First vs Desktop-First<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Mobile_First_recommended\"><\/span>Mobile First (recommended)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Use <strong>min-width<\/strong> queries.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Loads CSS for smallest devices first<\/li>\n\n\n\n<li>Faster &amp; more efficient<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">@media (min-width: 768px) {\n  \/* bigger screens *\/\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Desktop_First\"><\/span>Desktop First<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Use <strong>max-width<\/strong> queries.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Starts from large screens<\/li>\n\n\n\n<li>Less common today<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">@media (max-width: 1024px) {\n  \/* smaller screens *\/\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Advanced_Media_Queries_Modern_CSS\"><\/span>Advanced Media Queries (Modern CSS)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Container_Queries_2023\"><\/span>Container Queries (2023+)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Changes styling based on the size of a container, not the viewport.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">@container (min-width: 500px) {\n  .card { display: flex; }\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Forced_Colors_Mode\"><\/span>Forced Colors Mode<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">For accessibility and high-contrast themes.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">@media (forced-colors: active) {\n  * { forced-color-adjust: none; }\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Reduced_Motion\"><\/span>Reduced Motion<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Detect users who prefer minimal animations.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">@media (prefers-reduced-motion: reduce) {\n  .animation { animation: none; }\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Best_Practices_for_Media_Queries\"><\/span>Best Practices for Media Queries<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use <strong>mobile-first<\/strong> approach<\/li>\n\n\n\n<li>Stick to a <strong>simple breakpoint system<\/strong><\/li>\n\n\n\n<li>Avoid targeting specific devices<\/li>\n\n\n\n<li>Use responsive units (%, rem, vw, clamp())<\/li>\n\n\n\n<li>Test using Chrome DevTools + real devices<\/li>\n\n\n\n<li>Use container queries for components<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Ready-to-Use_Media_Query_Boilerplate\"><\/span>Ready-to-Use Media Query Boilerplate<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">\/* Mobile First Layout *\/\n@media (min-width: 480px) { \/* small phones *\/ }\n@media (min-width: 768px) { \/* tablets *\/ }\n@media (min-width: 1024px) { \/* laptops *\/ }\n@media (min-width: 1280px) { \/* desktops *\/ }\n@media (min-width: 1536px) { \/* large desktops *\/ }<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>CSS Media Queries allow you to apply CSS rules only when certain conditions are met \u2014 such as screen width, device orientation, color scheme, or resolution. They\u2019re the foundation of responsive web design. Basic Syntax Why Media Queries Matter Most Common Media Queries Start styling for small screens, then go up. Popular Screen Size Breakpoints [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":90,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-86","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-knowledge"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS Media Queries \u2014 The Complete Guide for Responsive Web Design<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Media Queries \u2014 The Complete Guide for Responsive Web Design\" \/>\n<meta property=\"og:description\" content=\"CSS Media Queries allow you to apply CSS rules only when certain conditions are met \u2014 such as screen width, device orientation, color scheme, or resolution. They\u2019re the foundation of responsive web design. Basic Syntax Why Media Queries Matter Most Common Media Queries Start styling for small screens, then go up. Popular Screen Size Breakpoints [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/\" \/>\n<meta property=\"og:site_name\" content=\"WhatIsMyScreenResolution.info Blog\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-29T07:50:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-04T12:06:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/whatismyscreenresolution.info\/blog\/wp-content\/uploads\/CSS-Media-Queries-for-Responsive-Web-Design.png\" \/>\n\t<meta property=\"og:image:width\" content=\"784\" \/>\n\t<meta property=\"og:image:height\" content=\"626\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ayaan Mizan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ayaan Mizan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/\"},\"author\":{\"name\":\"Ayaan Mizan\",\"@id\":\"https:\/\/whatismyscreenresolution.info\/blog\/#\/schema\/person\/3354155c49814ba27d54321d1771338f\"},\"headline\":\"CSS Media Queries \u2014 The Complete Guide for Responsive Web Design\",\"datePublished\":\"2025-11-29T07:50:43+00:00\",\"dateModified\":\"2026-02-04T12:06:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/\"},\"wordCount\":277,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/whatismyscreenresolution.info\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/whatismyscreenresolution.info\/blog\/wp-content\/uploads\/CSS-Media-Queries-for-Responsive-Web-Design.png\",\"articleSection\":[\"knowledge\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/\",\"url\":\"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/\",\"name\":\"CSS Media Queries \u2014 The Complete Guide for Responsive Web Design\",\"isPartOf\":{\"@id\":\"https:\/\/whatismyscreenresolution.info\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/whatismyscreenresolution.info\/blog\/wp-content\/uploads\/CSS-Media-Queries-for-Responsive-Web-Design.png\",\"datePublished\":\"2025-11-29T07:50:43+00:00\",\"dateModified\":\"2026-02-04T12:06:39+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/#primaryimage\",\"url\":\"https:\/\/whatismyscreenresolution.info\/blog\/wp-content\/uploads\/CSS-Media-Queries-for-Responsive-Web-Design.png\",\"contentUrl\":\"https:\/\/whatismyscreenresolution.info\/blog\/wp-content\/uploads\/CSS-Media-Queries-for-Responsive-Web-Design.png\",\"width\":784,\"height\":626,\"caption\":\"CSS Media Queries for Responsive Web Design\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/whatismyscreenresolution.info\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Media Queries \u2014 The Complete Guide for Responsive Web Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/whatismyscreenresolution.info\/blog\/#website\",\"url\":\"https:\/\/whatismyscreenresolution.info\/blog\/\",\"name\":\"WhatIsMyScreenResolution.info Blog\",\"description\":\"WhatIsMyScreenResolution.info Blog\",\"publisher\":{\"@id\":\"https:\/\/whatismyscreenresolution.info\/blog\/#organization\"},\"alternateName\":\"WhatIsMyScreenResolution.info Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/whatismyscreenresolution.info\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/whatismyscreenresolution.info\/blog\/#organization\",\"name\":\"WhatIsMyScreenResolution.info Blog\",\"alternateName\":\"WhatIsMyScreenResolution.info Blog\",\"url\":\"https:\/\/whatismyscreenresolution.info\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/whatismyscreenresolution.info\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/whatismyscreenresolution.info\/blog\/wp-content\/uploads\/whatismyscreenresolution-logo.png\",\"contentUrl\":\"https:\/\/whatismyscreenresolution.info\/blog\/wp-content\/uploads\/whatismyscreenresolution-logo.png\",\"width\":512,\"height\":512,\"caption\":\"WhatIsMyScreenResolution.info Blog\"},\"image\":{\"@id\":\"https:\/\/whatismyscreenresolution.info\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/whatismyscreenresolution.info\/blog\/#\/schema\/person\/3354155c49814ba27d54321d1771338f\",\"name\":\"Ayaan Mizan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/whatismyscreenresolution.info\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a3307e041d4cfa32e95ceb18573cac02ffd70ade5bc95eb38a0fb9c544990149?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a3307e041d4cfa32e95ceb18573cac02ffd70ade5bc95eb38a0fb9c544990149?s=96&d=mm&r=g\",\"caption\":\"Ayaan Mizan\"},\"sameAs\":[\"https:\/\/whatismyscreenresolution.info\/blog\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Media Queries \u2014 The Complete Guide for Responsive Web Design","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/","og_locale":"en_US","og_type":"article","og_title":"CSS Media Queries \u2014 The Complete Guide for Responsive Web Design","og_description":"CSS Media Queries allow you to apply CSS rules only when certain conditions are met \u2014 such as screen width, device orientation, color scheme, or resolution. They\u2019re the foundation of responsive web design. Basic Syntax Why Media Queries Matter Most Common Media Queries Start styling for small screens, then go up. Popular Screen Size Breakpoints [&hellip;]","og_url":"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/","og_site_name":"WhatIsMyScreenResolution.info Blog","article_published_time":"2025-11-29T07:50:43+00:00","article_modified_time":"2026-02-04T12:06:39+00:00","og_image":[{"width":784,"height":626,"url":"https:\/\/whatismyscreenresolution.info\/blog\/wp-content\/uploads\/CSS-Media-Queries-for-Responsive-Web-Design.png","type":"image\/png"}],"author":"Ayaan Mizan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Ayaan Mizan","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/#article","isPartOf":{"@id":"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/"},"author":{"name":"Ayaan Mizan","@id":"https:\/\/whatismyscreenresolution.info\/blog\/#\/schema\/person\/3354155c49814ba27d54321d1771338f"},"headline":"CSS Media Queries \u2014 The Complete Guide for Responsive Web Design","datePublished":"2025-11-29T07:50:43+00:00","dateModified":"2026-02-04T12:06:39+00:00","mainEntityOfPage":{"@id":"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/"},"wordCount":277,"commentCount":0,"publisher":{"@id":"https:\/\/whatismyscreenresolution.info\/blog\/#organization"},"image":{"@id":"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/#primaryimage"},"thumbnailUrl":"https:\/\/whatismyscreenresolution.info\/blog\/wp-content\/uploads\/CSS-Media-Queries-for-Responsive-Web-Design.png","articleSection":["knowledge"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/","url":"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/","name":"CSS Media Queries \u2014 The Complete Guide for Responsive Web Design","isPartOf":{"@id":"https:\/\/whatismyscreenresolution.info\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/#primaryimage"},"image":{"@id":"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/#primaryimage"},"thumbnailUrl":"https:\/\/whatismyscreenresolution.info\/blog\/wp-content\/uploads\/CSS-Media-Queries-for-Responsive-Web-Design.png","datePublished":"2025-11-29T07:50:43+00:00","dateModified":"2026-02-04T12:06:39+00:00","breadcrumb":{"@id":"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/#primaryimage","url":"https:\/\/whatismyscreenresolution.info\/blog\/wp-content\/uploads\/CSS-Media-Queries-for-Responsive-Web-Design.png","contentUrl":"https:\/\/whatismyscreenresolution.info\/blog\/wp-content\/uploads\/CSS-Media-Queries-for-Responsive-Web-Design.png","width":784,"height":626,"caption":"CSS Media Queries for Responsive Web Design"},{"@type":"BreadcrumbList","@id":"https:\/\/whatismyscreenresolution.info\/blog\/css-media-queries-the-complete-guide-for-responsive-web-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/whatismyscreenresolution.info\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS Media Queries \u2014 The Complete Guide for Responsive Web Design"}]},{"@type":"WebSite","@id":"https:\/\/whatismyscreenresolution.info\/blog\/#website","url":"https:\/\/whatismyscreenresolution.info\/blog\/","name":"WhatIsMyScreenResolution.info Blog","description":"WhatIsMyScreenResolution.info Blog","publisher":{"@id":"https:\/\/whatismyscreenresolution.info\/blog\/#organization"},"alternateName":"WhatIsMyScreenResolution.info Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/whatismyscreenresolution.info\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/whatismyscreenresolution.info\/blog\/#organization","name":"WhatIsMyScreenResolution.info Blog","alternateName":"WhatIsMyScreenResolution.info Blog","url":"https:\/\/whatismyscreenresolution.info\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/whatismyscreenresolution.info\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/whatismyscreenresolution.info\/blog\/wp-content\/uploads\/whatismyscreenresolution-logo.png","contentUrl":"https:\/\/whatismyscreenresolution.info\/blog\/wp-content\/uploads\/whatismyscreenresolution-logo.png","width":512,"height":512,"caption":"WhatIsMyScreenResolution.info Blog"},"image":{"@id":"https:\/\/whatismyscreenresolution.info\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/whatismyscreenresolution.info\/blog\/#\/schema\/person\/3354155c49814ba27d54321d1771338f","name":"Ayaan Mizan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/whatismyscreenresolution.info\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a3307e041d4cfa32e95ceb18573cac02ffd70ade5bc95eb38a0fb9c544990149?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a3307e041d4cfa32e95ceb18573cac02ffd70ade5bc95eb38a0fb9c544990149?s=96&d=mm&r=g","caption":"Ayaan Mizan"},"sameAs":["https:\/\/whatismyscreenresolution.info\/blog"]}]}},"_links":{"self":[{"href":"https:\/\/whatismyscreenresolution.info\/blog\/wp-json\/wp\/v2\/posts\/86","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/whatismyscreenresolution.info\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/whatismyscreenresolution.info\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/whatismyscreenresolution.info\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/whatismyscreenresolution.info\/blog\/wp-json\/wp\/v2\/comments?post=86"}],"version-history":[{"count":4,"href":"https:\/\/whatismyscreenresolution.info\/blog\/wp-json\/wp\/v2\/posts\/86\/revisions"}],"predecessor-version":[{"id":106,"href":"https:\/\/whatismyscreenresolution.info\/blog\/wp-json\/wp\/v2\/posts\/86\/revisions\/106"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/whatismyscreenresolution.info\/blog\/wp-json\/wp\/v2\/media\/90"}],"wp:attachment":[{"href":"https:\/\/whatismyscreenresolution.info\/blog\/wp-json\/wp\/v2\/media?parent=86"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/whatismyscreenresolution.info\/blog\/wp-json\/wp\/v2\/categories?post=86"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/whatismyscreenresolution.info\/blog\/wp-json\/wp\/v2\/tags?post=86"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}