[{"data":1,"prerenderedAt":1315},["ShallowReactive",2],{"page-\u002Fcss\u002F09-responsive-design":3},{"id":4,"title":5,"body":6,"description":1308,"extension":1309,"meta":1310,"navigation":161,"path":1311,"seo":1312,"stem":1313,"__hash__":1314},"content\u002Fcss\u002F09-responsive-design.md","09 — Responsive Design: Media Queries, Container Queries & Fluid CSS",{"type":7,"value":8,"toc":1296},"minimark",[9,13,54,59,113,117,396,401,469,546,550,714,718,725,898,902,961,1044,1048,1120,1124,1205,1209,1272,1292],[10,11,5],"h1",{"id":12},"_09-responsive-design-media-queries-container-queries-fluid-css",[14,15,16,17,21,22,26,27,26,30,33,34,37,38,41,42,37,45,48,49,53],"p",{},"Responsive design has three layers: ",[18,19,20],"strong",{},"fluid CSS"," (no breakpoints — ",[23,24,25],"code",{},"clamp",", ",[23,28,29],{},"auto-fit",[23,31,32],{},"flex-wrap","), ",[18,35,36],{},"viewport media queries"," (",[23,39,40],{},"@media (min-width: …)"," — page-level changes), and ",[18,43,44],{},"container queries",[23,46,47],{},"@container"," — component-level changes). Use them in that order of preference: reach for a media query only when the layout ",[50,51,52],"em",{},"fundamentally"," changes.",[55,56,58],"h2",{"id":57},"the-viewport-meta-tag-required","The Viewport Meta Tag — required",[60,61,63],"code-wrapper",{"language":62},"html",[64,65,69],"pre",{"className":66,"code":67,"language":62,"meta":68,"style":68},"language-html shiki shiki-themes github-light github-dark","\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u003C!-- Without this, mobile browsers render at 980px and zoom out. ALWAYS include. -->\n","",[23,70,71,106],{"__ignoreMap":68},[72,73,76,80,84,88,91,95,98,100,103],"span",{"class":74,"line":75},"line",1,[72,77,79],{"class":78},"ssxIu","\u003C",[72,81,83],{"class":82},"sk71V","meta",[72,85,87],{"class":86},"sIsaT"," name",[72,89,90],{"class":78},"=",[72,92,94],{"class":93},"sJ6F3","\"viewport\"",[72,96,97],{"class":86}," content",[72,99,90],{"class":78},[72,101,102],{"class":93},"\"width=device-width, initial-scale=1.0\"",[72,104,105],{"class":78},">\n",[72,107,109],{"class":74,"line":108},2,[72,110,112],{"class":111},"sdCPZ","\u003C!-- Without this, mobile browsers render at 980px and zoom out. ALWAYS include. -->\n",[55,114,116],{"id":115},"media-queries-mobile-first","Media Queries — mobile-first",[60,118,120],{"language":119},"css",[64,121,124],{"className":122,"code":123,"language":119,"meta":68,"style":68},"language-css shiki shiki-themes github-light github-dark","\u002F* Mobile-first: base = mobile, min-width adds for larger screens (progressive enhancement). *\u002F\n.container { padding: 1rem; }\n\n@media (min-width: 768px) { .container { padding: 2rem; } }\n@media (min-width: 1024px) { .container { padding: 3rem; max-width: 1200px; margin-inline: auto; } }\n\n\u002F* Media features (not just width): *\u002F\n@media (prefers-color-scheme: dark) { :root { --c-bg: #1a1a1a; --c-fg: #eee; } }\n@media (prefers-reduced-motion: reduce) { * { animation: none; transition: none; } }\n@media (hover: hover) { .card:hover { transform: scale(1.05); } }\n@media print { .no-print { display: none; } }\n",[23,125,126,131,156,163,201,257,262,268,302,334,372],{"__ignoreMap":68},[72,127,128],{"class":74,"line":75},[72,129,130],{"class":111},"\u002F* Mobile-first: base = mobile, min-width adds for larger screens (progressive enhancement). *\u002F\n",[72,132,133,136,139,143,146,149,153],{"class":74,"line":108},[72,134,135],{"class":86},".container",[72,137,138],{"class":78}," { ",[72,140,142],{"class":141},"snvgF","padding",[72,144,145],{"class":78},": ",[72,147,148],{"class":141},"1",[72,150,152],{"class":151},"svdQ7","rem",[72,154,155],{"class":78},"; }\n",[72,157,159],{"class":74,"line":158},3,[72,160,162],{"emptyLinePlaceholder":161},true,"\n",[72,164,166,169,171,174,176,179,182,185,187,189,191,193,196,198],{"class":74,"line":165},4,[72,167,168],{"class":151},"@media",[72,170,37],{"class":78},[72,172,173],{"class":141},"min-width",[72,175,145],{"class":78},[72,177,178],{"class":141},"768",[72,180,181],{"class":151},"px",[72,183,184],{"class":78},") { ",[72,186,135],{"class":86},[72,188,138],{"class":78},[72,190,142],{"class":141},[72,192,145],{"class":78},[72,194,195],{"class":141},"2",[72,197,152],{"class":151},[72,199,200],{"class":78},"; } }\n",[72,202,204,206,208,210,212,215,217,219,221,223,225,227,230,232,235,238,240,243,245,247,250,252,255],{"class":74,"line":203},5,[72,205,168],{"class":151},[72,207,37],{"class":78},[72,209,173],{"class":141},[72,211,145],{"class":78},[72,213,214],{"class":141},"1024",[72,216,181],{"class":151},[72,218,184],{"class":78},[72,220,135],{"class":86},[72,222,138],{"class":78},[72,224,142],{"class":141},[72,226,145],{"class":78},[72,228,229],{"class":141},"3",[72,231,152],{"class":151},[72,233,234],{"class":78},"; ",[72,236,237],{"class":141},"max-width",[72,239,145],{"class":78},[72,241,242],{"class":141},"1200",[72,244,181],{"class":151},[72,246,234],{"class":78},[72,248,249],{"class":141},"margin-inline",[72,251,145],{"class":78},[72,253,254],{"class":141},"auto",[72,256,200],{"class":78},[72,258,260],{"class":74,"line":259},6,[72,261,162],{"emptyLinePlaceholder":161},[72,263,265],{"class":74,"line":264},7,[72,266,267],{"class":111},"\u002F* Media features (not just width): *\u002F\n",[72,269,271,273,276,279,281,285,287,290,292,295,297,300],{"class":74,"line":270},8,[72,272,168],{"class":151},[72,274,275],{"class":78}," (prefers-color-scheme: dark) { ",[72,277,278],{"class":86},":root",[72,280,138],{"class":78},[72,282,284],{"class":283},"sCrzJ","--c-bg",[72,286,145],{"class":78},[72,288,289],{"class":141},"#1a1a1a",[72,291,234],{"class":78},[72,293,294],{"class":283},"--c-fg",[72,296,145],{"class":78},[72,298,299],{"class":141},"#eee",[72,301,200],{"class":78},[72,303,305,307,310,313,315,318,320,323,325,328,330,332],{"class":74,"line":304},9,[72,306,168],{"class":151},[72,308,309],{"class":78}," (prefers-reduced-motion: reduce) { ",[72,311,312],{"class":82},"*",[72,314,138],{"class":78},[72,316,317],{"class":141},"animation",[72,319,145],{"class":78},[72,321,322],{"class":141},"none",[72,324,234],{"class":78},[72,326,327],{"class":141},"transition",[72,329,145],{"class":78},[72,331,322],{"class":141},[72,333,200],{"class":78},[72,335,337,339,341,344,346,348,350,353,355,358,360,363,366,369],{"class":74,"line":336},10,[72,338,168],{"class":151},[72,340,37],{"class":78},[72,342,343],{"class":141},"hover",[72,345,145],{"class":78},[72,347,343],{"class":141},[72,349,184],{"class":78},[72,351,352],{"class":86},".card:hover",[72,354,138],{"class":78},[72,356,357],{"class":141},"transform",[72,359,145],{"class":78},[72,361,362],{"class":141},"scale",[72,364,365],{"class":78},"(",[72,367,368],{"class":141},"1.05",[72,370,371],{"class":78},"); } }\n",[72,373,375,377,380,382,385,387,390,392,394],{"class":74,"line":374},11,[72,376,168],{"class":151},[72,378,379],{"class":141}," print",[72,381,138],{"class":78},[72,383,384],{"class":86},".no-print",[72,386,138],{"class":78},[72,388,389],{"class":141},"display",[72,391,145],{"class":78},[72,393,322],{"class":141},[72,395,200],{"class":78},[397,398,400],"h3",{"id":399},"anti-pattern-desktop-first-max-width-confusion","Anti-pattern: desktop-first max-width confusion",[60,402,403],{"language":119},[64,404,406],{"className":122,"code":405,"language":119,"meta":68,"style":68},"\u002F* ❌ max-width = desktop-first. Boundary confusion + tablet at 800px misses the breakpoint. *\u002F\n.container { padding: 2rem; max-width: 1200px; }\n@media (max-width: 768px) { .container { padding: 1rem; } }\n",[23,407,408,413,439],{"__ignoreMap":68},[72,409,410],{"class":74,"line":75},[72,411,412],{"class":111},"\u002F* ❌ max-width = desktop-first. Boundary confusion + tablet at 800px misses the breakpoint. *\u002F\n",[72,414,415,417,419,421,423,425,427,429,431,433,435,437],{"class":74,"line":108},[72,416,135],{"class":86},[72,418,138],{"class":78},[72,420,142],{"class":141},[72,422,145],{"class":78},[72,424,195],{"class":141},[72,426,152],{"class":151},[72,428,234],{"class":78},[72,430,237],{"class":141},[72,432,145],{"class":78},[72,434,242],{"class":141},[72,436,181],{"class":151},[72,438,155],{"class":78},[72,440,441,443,445,447,449,451,453,455,457,459,461,463,465,467],{"class":74,"line":158},[72,442,168],{"class":151},[72,444,37],{"class":78},[72,446,237],{"class":141},[72,448,145],{"class":78},[72,450,178],{"class":141},[72,452,181],{"class":151},[72,454,184],{"class":78},[72,456,135],{"class":86},[72,458,138],{"class":78},[72,460,142],{"class":141},[72,462,145],{"class":78},[72,464,148],{"class":141},[72,466,152],{"class":151},[72,468,200],{"class":78},[60,470,471],{"language":119},[64,472,474],{"className":122,"code":473,"language":119,"meta":68,"style":68},"\u002F* ✓ mobile-first (min-width): base = mobile, accumulate for larger. Clear, preferred. *\u002F\n.container { padding: 1rem; }\n@media (min-width: 769px) { .container { padding: 2rem; max-width: 1200px; margin-inline: auto; } }\n",[23,475,476,481,497],{"__ignoreMap":68},[72,477,478],{"class":74,"line":75},[72,479,480],{"class":111},"\u002F* ✓ mobile-first (min-width): base = mobile, accumulate for larger. Clear, preferred. *\u002F\n",[72,482,483,485,487,489,491,493,495],{"class":74,"line":108},[72,484,135],{"class":86},[72,486,138],{"class":78},[72,488,142],{"class":141},[72,490,145],{"class":78},[72,492,148],{"class":141},[72,494,152],{"class":151},[72,496,155],{"class":78},[72,498,499,501,503,505,507,510,512,514,516,518,520,522,524,526,528,530,532,534,536,538,540,542,544],{"class":74,"line":158},[72,500,168],{"class":151},[72,502,37],{"class":78},[72,504,173],{"class":141},[72,506,145],{"class":78},[72,508,509],{"class":141},"769",[72,511,181],{"class":151},[72,513,184],{"class":78},[72,515,135],{"class":86},[72,517,138],{"class":78},[72,519,142],{"class":141},[72,521,145],{"class":78},[72,523,195],{"class":141},[72,525,152],{"class":151},[72,527,234],{"class":78},[72,529,237],{"class":141},[72,531,145],{"class":78},[72,533,242],{"class":141},[72,535,181],{"class":151},[72,537,234],{"class":78},[72,539,249],{"class":141},[72,541,145],{"class":78},[72,543,254],{"class":141},[72,545,200],{"class":78},[55,547,549],{"id":548},"fluid-css-responsive-without-breakpoints","Fluid CSS — responsive without breakpoints",[60,551,552],{"language":119},[64,553,555],{"className":122,"code":554,"language":119,"meta":68,"style":68},":root {\n  --font-body: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);   \u002F* fluid, bounded, no media query *\u002F\n  --space: clamp(1rem, 2vw + 1rem, 3rem);\n}\n.cards { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }  \u002F* responsive grid *\u002F\n.row { flex-wrap: wrap; }  \u002F* wrap when no room *\u002F\n",[23,556,557,564,608,645,650,694],{"__ignoreMap":68},[72,558,559,561],{"class":74,"line":75},[72,560,278],{"class":86},[72,562,563],{"class":78}," {\n",[72,565,566,569,571,573,575,577,579,581,584,586,589,592,595,597,600,602,605],{"class":74,"line":108},[72,567,568],{"class":283},"  --font-body",[72,570,145],{"class":78},[72,572,25],{"class":141},[72,574,365],{"class":78},[72,576,148],{"class":141},[72,578,152],{"class":151},[72,580,26],{"class":78},[72,582,583],{"class":141},"0.9",[72,585,152],{"class":151},[72,587,588],{"class":283}," +",[72,590,591],{"class":141}," 0.5",[72,593,594],{"class":151},"vw",[72,596,26],{"class":78},[72,598,599],{"class":141},"1.25",[72,601,152],{"class":151},[72,603,604],{"class":78},");   ",[72,606,607],{"class":111},"\u002F* fluid, bounded, no media query *\u002F\n",[72,609,610,613,615,617,619,621,623,625,627,629,631,634,636,638,640,642],{"class":74,"line":158},[72,611,612],{"class":283},"  --space",[72,614,145],{"class":78},[72,616,25],{"class":141},[72,618,365],{"class":78},[72,620,148],{"class":141},[72,622,152],{"class":151},[72,624,26],{"class":78},[72,626,195],{"class":141},[72,628,594],{"class":151},[72,630,588],{"class":283},[72,632,633],{"class":141}," 1",[72,635,152],{"class":151},[72,637,26],{"class":78},[72,639,229],{"class":141},[72,641,152],{"class":151},[72,643,644],{"class":78},");\n",[72,646,647],{"class":74,"line":165},[72,648,649],{"class":78},"}\n",[72,651,652,655,657,660,662,665,667,669,671,674,676,679,681,683,685,688,691],{"class":74,"line":203},[72,653,654],{"class":86},".cards",[72,656,138],{"class":78},[72,658,659],{"class":141},"grid-template-columns",[72,661,145],{"class":78},[72,663,664],{"class":141},"repeat",[72,666,365],{"class":78},[72,668,29],{"class":141},[72,670,26],{"class":78},[72,672,673],{"class":141},"minmax",[72,675,365],{"class":78},[72,677,678],{"class":141},"250",[72,680,181],{"class":151},[72,682,26],{"class":78},[72,684,148],{"class":141},[72,686,687],{"class":151},"fr",[72,689,690],{"class":78},")); }  ",[72,692,693],{"class":111},"\u002F* responsive grid *\u002F\n",[72,695,696,699,701,703,705,708,711],{"class":74,"line":259},[72,697,698],{"class":86},".row",[72,700,138],{"class":78},[72,702,32],{"class":141},[72,704,145],{"class":78},[72,706,707],{"class":141},"wrap",[72,709,710],{"class":78},"; }  ",[72,712,713],{"class":111},"\u002F* wrap when no room *\u002F\n",[55,715,717],{"id":716},"container-queries-component-level-responsiveness","Container Queries — component-level responsiveness",[14,719,720,721,724],{},"A card in a 200px sidebar and an 800px main area should adapt to its ",[50,722,723],{},"container",", not the viewport. Container queries make the same component reusable across contexts.",[60,726,727],{"language":119},[64,728,730],{"className":122,"code":729,"language":119,"meta":68,"style":68},".sidebar { container-type: inline-size; }  \u002F* query container (inline = horizontal) *\u002F\n\n.card { \u002F* default: compact *\u002F }\n@container (min-width: 400px) {\n  .card { display: grid; grid-template-columns: 1fr 2fr; }  \u002F* wider → horizontal *\u002F\n}\n\u002F* Container query units: cqi = 1% of container inline size. Like vw but for the container. *\u002F\n.card__title { font-size: clamp(1rem, 3cqi, 2rem); }\n\n\u002F* Container style queries (2023+): query a container's custom properties. *\u002F\n@container style(--theme: dark) {\n  .card { background: #222; color: #eee; }\n}\n",[23,731,732,748,752,765,772,806,810,815,851,855,860,867,893],{"__ignoreMap":68},[72,733,734,737,739,742,745],{"class":74,"line":75},[72,735,736],{"class":86},".sidebar",[72,738,138],{"class":78},[72,740,741],{"class":141},"container-type",[72,743,744],{"class":78},": inline-size; }  ",[72,746,747],{"class":111},"\u002F* query container (inline = horizontal) *\u002F\n",[72,749,750],{"class":74,"line":108},[72,751,162],{"emptyLinePlaceholder":161},[72,753,754,757,759,762],{"class":74,"line":158},[72,755,756],{"class":86},".card",[72,758,138],{"class":78},[72,760,761],{"class":111},"\u002F* default: compact *\u002F",[72,763,764],{"class":78}," }\n",[72,766,767,769],{"class":74,"line":165},[72,768,47],{"class":151},[72,770,771],{"class":78}," (min-width: 400px) {\n",[72,773,774,777,779,781,783,786,788,790,792,794,796,799,801,803],{"class":74,"line":203},[72,775,776],{"class":86},"  .card",[72,778,138],{"class":78},[72,780,389],{"class":141},[72,782,145],{"class":78},[72,784,785],{"class":141},"grid",[72,787,234],{"class":78},[72,789,659],{"class":141},[72,791,145],{"class":78},[72,793,148],{"class":141},[72,795,687],{"class":151},[72,797,798],{"class":141}," 2",[72,800,687],{"class":151},[72,802,710],{"class":78},[72,804,805],{"class":111},"\u002F* wider → horizontal *\u002F\n",[72,807,808],{"class":74,"line":259},[72,809,649],{"class":78},[72,811,812],{"class":74,"line":264},[72,813,814],{"class":111},"\u002F* Container query units: cqi = 1% of container inline size. Like vw but for the container. *\u002F\n",[72,816,817,820,822,825,827,829,831,833,835,837,839,842,844,846,848],{"class":74,"line":270},[72,818,819],{"class":86},".card__title",[72,821,138],{"class":78},[72,823,824],{"class":141},"font-size",[72,826,145],{"class":78},[72,828,25],{"class":141},[72,830,365],{"class":78},[72,832,148],{"class":141},[72,834,152],{"class":151},[72,836,26],{"class":78},[72,838,229],{"class":141},[72,840,841],{"class":151},"cqi",[72,843,26],{"class":78},[72,845,195],{"class":141},[72,847,152],{"class":151},[72,849,850],{"class":78},"); }\n",[72,852,853],{"class":74,"line":304},[72,854,162],{"emptyLinePlaceholder":161},[72,856,857],{"class":74,"line":336},[72,858,859],{"class":111},"\u002F* Container style queries (2023+): query a container's custom properties. *\u002F\n",[72,861,862,864],{"class":74,"line":374},[72,863,47],{"class":151},[72,865,866],{"class":78}," style(--theme: dark) {\n",[72,868,870,872,874,877,879,882,884,887,889,891],{"class":74,"line":869},12,[72,871,776],{"class":86},[72,873,138],{"class":78},[72,875,876],{"class":141},"background",[72,878,145],{"class":78},[72,880,881],{"class":141},"#222",[72,883,234],{"class":78},[72,885,886],{"class":141},"color",[72,888,145],{"class":78},[72,890,299],{"class":141},[72,892,155],{"class":78},[72,894,896],{"class":74,"line":895},13,[72,897,649],{"class":78},[55,899,901],{"id":900},"responsive-images-let-the-browser-choose","Responsive Images — let the browser choose",[60,903,904],{"language":62},[64,905,907],{"className":66,"code":906,"language":62,"meta":68,"style":68},"\u003C!-- srcset + sizes: browser picks the right image by viewport + device pixel ratio. No CSS. -->\n\u003Cimg src=\"small.jpg\"\n     srcset=\"small.jpg 480w, medium.jpg 800w, large.jpg 1200w\"\n     sizes=\"(max-width: 600px) 480px, 800px\"\n     alt=\"...\">\n",[23,908,909,914,929,939,949],{"__ignoreMap":68},[72,910,911],{"class":74,"line":75},[72,912,913],{"class":111},"\u003C!-- srcset + sizes: browser picks the right image by viewport + device pixel ratio. No CSS. -->\n",[72,915,916,918,921,924,926],{"class":74,"line":108},[72,917,79],{"class":78},[72,919,920],{"class":82},"img",[72,922,923],{"class":86}," src",[72,925,90],{"class":78},[72,927,928],{"class":93},"\"small.jpg\"\n",[72,930,931,934,936],{"class":74,"line":158},[72,932,933],{"class":86},"     srcset",[72,935,90],{"class":78},[72,937,938],{"class":93},"\"small.jpg 480w, medium.jpg 800w, large.jpg 1200w\"\n",[72,940,941,944,946],{"class":74,"line":165},[72,942,943],{"class":86},"     sizes",[72,945,90],{"class":78},[72,947,948],{"class":93},"\"(max-width: 600px) 480px, 800px\"\n",[72,950,951,954,956,959],{"class":74,"line":203},[72,952,953],{"class":86},"     alt",[72,955,90],{"class":78},[72,957,958],{"class":93},"\"...\"",[72,960,105],{"class":78},[60,962,963],{"language":119},[64,964,966],{"className":122,"code":965,"language":119,"meta":68,"style":68},"img {\n  inline-size: 100%;\n  aspect-ratio: 16 \u002F 9;   \u002F* maintain ratio without padding hacks *\u002F\n  object-fit: cover;      \u002F* fill the box, crop overflow *\u002F\n  object-position: center;\n}\n",[23,967,968,974,990,1012,1028,1040],{"__ignoreMap":68},[72,969,970,972],{"class":74,"line":75},[72,971,920],{"class":82},[72,973,563],{"class":78},[72,975,976,979,981,984,987],{"class":74,"line":108},[72,977,978],{"class":141},"  inline-size",[72,980,145],{"class":78},[72,982,983],{"class":141},"100",[72,985,986],{"class":151},"%",[72,988,989],{"class":78},";\n",[72,991,992,995,997,1000,1003,1006,1009],{"class":74,"line":158},[72,993,994],{"class":141},"  aspect-ratio",[72,996,145],{"class":78},[72,998,999],{"class":141},"16",[72,1001,1002],{"class":78}," \u002F ",[72,1004,1005],{"class":141},"9",[72,1007,1008],{"class":78},";   ",[72,1010,1011],{"class":111},"\u002F* maintain ratio without padding hacks *\u002F\n",[72,1013,1014,1017,1019,1022,1025],{"class":74,"line":165},[72,1015,1016],{"class":141},"  object-fit",[72,1018,145],{"class":78},[72,1020,1021],{"class":141},"cover",[72,1023,1024],{"class":78},";      ",[72,1026,1027],{"class":111},"\u002F* fill the box, crop overflow *\u002F\n",[72,1029,1030,1033,1035,1038],{"class":74,"line":203},[72,1031,1032],{"class":141},"  object-position",[72,1034,145],{"class":78},[72,1036,1037],{"class":141},"center",[72,1039,989],{"class":78},[72,1041,1042],{"class":74,"line":259},[72,1043,649],{"class":78},[55,1045,1047],{"id":1046},"tips-tricks","💡 Tips & Tricks",[1049,1050,1051,1072,1085,1093,1105],"ul",{},[1052,1053,1054,1057,1058,26,1060,26,1062,1064,1065,1067,1068,1071],"li",{},[18,1055,1056],{},"Idiom",": use fluid CSS (",[23,1059,25],{},[23,1061,29],{},[23,1063,32],{},") before media queries — most responsive needs need no breakpoints. Reach for ",[23,1066,168],{}," only when the layout ",[50,1069,1070],{},"fundamentally changes",".",[1052,1073,1074,1076,1077,1080,1081,1084],{},[18,1075,1056],{},": container queries for components in different contexts — ",[23,1078,1079],{},"container-type: inline-size"," + ",[23,1082,1083],{},"@container (min-width: …)"," makes a card adapt to its container, not the viewport.",[1052,1086,1087,145,1089,1092],{},[18,1088,1056],{},[23,1090,1091],{},"prefers-reduced-motion"," is mandatory for accessibility — disable motion for vestibular-sensitive users.",[1052,1094,1095,145,1097,1100,1101,1104],{},[18,1096,1056],{},[23,1098,1099],{},"@media (hover: hover)"," to avoid sticky hover on touch — touch devices don't hover; ",[23,1102,1103],{},":hover"," sticks after tap.",[1052,1106,1107,145,1109,1080,1112,1115,1116,1119],{},[18,1108,1056],{},[23,1110,1111],{},"srcset",[23,1113,1114],{},"sizes"," for responsive images — the browser picks the right file. Use ",[23,1117,1118],{},"\u003Cpicture>"," for art direction.",[55,1121,1123],{"id":1122},"️-edge-cases-gotchas","⚠️ Edge Cases & Gotchas",[1049,1125,1126,1141,1154,1170,1176,1192],{},[1052,1127,1128,1133,1134,1136,1137,1140],{},[18,1129,1130,1132],{},[23,1131,168],{}," doesn't add specificity",": a rule inside ",[23,1135,168],{}," has the same specificity as outside. Source order decides — put media queries ",[50,1138,1139],{},"after"," the base.",[1052,1142,1143,145,1148,1150,1151,1153],{},[18,1144,1145,1146],{},"Container queries need ",[23,1147,741],{},[23,1149,47],{}," only works on descendants of an element with ",[23,1152,1079],{},". Forgetting it → the query never matches.",[1052,1155,1156,145,1162,1165,1166,1169],{},[18,1157,1158,1161],{},[23,1159,1160],{},"container-type: size"," disables content-based sizing",[23,1163,1164],{},"inline-size"," (horizontal) is usually what you want; ",[23,1167,1168],{},"size"," (both axes) needs explicit height.",[1052,1171,1172,1175],{},[18,1173,1174],{},"Breakpoints should be content-based, not device-based",": \"if the layout breaks at 720px, use 720px\" — not \"use 768px because iPad.\"",[1052,1177,1178,1184,1185,1188,1189,1071],{},[18,1179,1180,1183],{},[23,1181,1182],{},"100vw"," includes the scrollbar on desktop"," → horizontal overflow. Use ",[23,1186,1187],{},"100%"," or ",[23,1190,1191],{},"dvw",[1052,1193,1194,1200,1201,1204],{},[18,1195,1196,1199],{},[23,1197,1198],{},"prefers-color-scheme"," is system-wide",": for a manual toggle, use ",[23,1202,1203],{},"data-theme"," + CSS variables.",[55,1206,1208],{"id":1207},"spot-the-bug","🧠 Spot the Bug",[60,1210,1211],{"language":119},[64,1212,1214],{"className":122,"code":1213,"language":119,"meta":68,"style":68},".container { padding: 2rem; max-width: 1200px; }\n@media (max-width: 768px) { .container { padding: 1rem; } }\n",[23,1215,1216,1242],{"__ignoreMap":68},[72,1217,1218,1220,1222,1224,1226,1228,1230,1232,1234,1236,1238,1240],{"class":74,"line":75},[72,1219,135],{"class":86},[72,1221,138],{"class":78},[72,1223,142],{"class":141},[72,1225,145],{"class":78},[72,1227,195],{"class":141},[72,1229,152],{"class":151},[72,1231,234],{"class":78},[72,1233,237],{"class":141},[72,1235,145],{"class":78},[72,1237,242],{"class":141},[72,1239,181],{"class":151},[72,1241,155],{"class":78},[72,1243,1244,1246,1248,1250,1252,1254,1256,1258,1260,1262,1264,1266,1268,1270],{"class":74,"line":108},[72,1245,168],{"class":151},[72,1247,37],{"class":78},[72,1249,237],{"class":141},[72,1251,145],{"class":78},[72,1253,178],{"class":141},[72,1255,181],{"class":151},[72,1257,184],{"class":78},[72,1259,135],{"class":86},[72,1261,138],{"class":78},[72,1263,142],{"class":141},[72,1265,145],{"class":78},[72,1267,148],{"class":141},[72,1269,152],{"class":151},[72,1271,200],{"class":78},[1273,1274,1275,1279],"details",{},[1276,1277,1278],"summary",{},"Answer",[14,1280,1281,1282,1284,1285,1288,1289,1291],{},"Desktop-first (",[23,1283,237],{},"). A tablet reporting 800px CSS width misses ",[23,1286,1287],{},"max-width: 768px"," → gets desktop padding. Fix: mobile-first (",[23,1290,173],{},") — base is mobile, larger screens override. Mobile-first avoids the \"does exactly 768px match?\" boundary confusion and is the preferred pattern (progressive enhancement).",[1293,1294,1295],"style",{},"html pre.shiki code .ssxIu, html code.shiki .ssxIu{--shiki-default:#24292E;--shiki-github-dark:#E1E4E8}html pre.shiki code .sk71V, html code.shiki .sk71V{--shiki-default:#22863A;--shiki-github-dark:#85E89D}html pre.shiki code .sIsaT, html code.shiki .sIsaT{--shiki-default:#6F42C1;--shiki-github-dark:#B392F0}html pre.shiki code .sJ6F3, html code.shiki .sJ6F3{--shiki-default:#032F62;--shiki-github-dark:#9ECBFF}html pre.shiki code .sdCPZ, html code.shiki .sdCPZ{--shiki-default:#6A737D;--shiki-github-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}html.github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}html pre.shiki code .snvgF, html code.shiki .snvgF{--shiki-default:#005CC5;--shiki-github-dark:#79B8FF}html pre.shiki code .svdQ7, html code.shiki .svdQ7{--shiki-default:#D73A49;--shiki-github-dark:#F97583}html pre.shiki code .sCrzJ, html code.shiki .sCrzJ{--shiki-default:#E36209;--shiki-github-dark:#FFAB70}",{"title":68,"searchDepth":108,"depth":108,"links":1297},[1298,1299,1302,1303,1304,1305,1306,1307],{"id":57,"depth":108,"text":58},{"id":115,"depth":108,"text":116,"children":1300},[1301],{"id":399,"depth":158,"text":400},{"id":548,"depth":108,"text":549},{"id":716,"depth":108,"text":717},{"id":900,"depth":108,"text":901},{"id":1046,"depth":108,"text":1047},{"id":1122,"depth":108,"text":1123},{"id":1207,"depth":108,"text":1208},"Mobile-first media queries, container queries for component-level responsiveness, clamp\u002Fauto-fit fluid patterns, and responsive images with srcset. Code-first reference with viewport-meta and prefers-* media features.","md",{},"\u002Fcss\u002F09-responsive-design",{"title":5,"description":1308},"css\u002F09-responsive-design","jiwDXfNKEIl3dvDzfKMSyhNnSpuQyf32myv3PngQYG4",1789924644826]