[{"data":1,"prerenderedAt":247},["ShallowReactive",2],{"term-m\u002Fmedia-query":3,"related-m\u002Fmedia-query":228},{"id":4,"title":5,"acronym":6,"body":7,"category":209,"description":210,"difficulty":211,"extension":212,"letter":213,"meta":214,"navigation":131,"path":215,"related":216,"seo":222,"sitemap":223,"stem":226,"subcategory":6,"__hash__":227},"terms\u002Fterms\u002Fm\u002Fmedia-query.md","Media Query",null,{"type":8,"value":9,"toc":203},"minimark",[10,15,19,23,26,30,192,196,199],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"A media query is a CSS if-statement based on screen conditions. 'If the screen is narrower than 768px, apply these styles.' You can check width, height, orientation, dark mode preference, and more. The backbone of responsive design.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"A media query is a CSS at-rule (@media) that applies styles conditionally based on device characteristics such as viewport width, height, orientation, resolution, or color scheme preference. Media queries are fundamental to responsive design and are now also usable in JavaScript via window.matchMedia().",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","@media (max-width: 768px) {\n  .nav { flex-direction: column; }\n  .sidebar { display: none; }\n}\n\n@media (prefers-color-scheme: dark) {\n  body { background: #1a1a1a; color: #fff; }\n}\n","css","",[38,39,40,70,98,120,126,133,152,187],"code",{"__ignoreMap":36},[41,42,45,49,53,57,60,64,67],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"s7zQu","@media",[41,50,52],{"class":51},"sMK4o"," (",[41,54,56],{"class":55},"sBMFI","max-width",[41,58,59],{"class":51},":",[41,61,63],{"class":62},"sbssI"," 768px",[41,65,66],{"class":51},")",[41,68,69],{"class":51}," {\n",[41,71,73,76,79,82,86,88,92,95],{"class":43,"line":72},2,[41,74,75],{"class":51},"  .",[41,77,78],{"class":55},"nav",[41,80,81],{"class":51}," {",[41,83,85],{"class":84},"sqsOY"," flex-direction",[41,87,59],{"class":51},[41,89,91],{"class":90},"sTEyZ"," column",[41,93,94],{"class":51},";",[41,96,97],{"class":51}," }\n",[41,99,101,103,106,108,111,113,116,118],{"class":43,"line":100},3,[41,102,75],{"class":51},[41,104,105],{"class":55},"sidebar",[41,107,81],{"class":51},[41,109,110],{"class":84}," display",[41,112,59],{"class":51},[41,114,115],{"class":90}," none",[41,117,94],{"class":51},[41,119,97],{"class":51},[41,121,123],{"class":43,"line":122},4,[41,124,125],{"class":51},"}\n",[41,127,129],{"class":43,"line":128},5,[41,130,132],{"emptyLinePlaceholder":131},true,"\n",[41,134,136,138,140,143,145,148,150],{"class":43,"line":135},6,[41,137,48],{"class":47},[41,139,52],{"class":51},[41,141,142],{"class":90},"prefers-color-scheme",[41,144,59],{"class":51},[41,146,147],{"class":90}," dark",[41,149,66],{"class":51},[41,151,69],{"class":51},[41,153,155,158,160,163,165,168,171,173,176,178,180,183,185],{"class":43,"line":154},7,[41,156,157],{"class":55},"  body",[41,159,81],{"class":51},[41,161,162],{"class":84}," background",[41,164,59],{"class":51},[41,166,167],{"class":51}," #",[41,169,170],{"class":90},"1a1a1a",[41,172,94],{"class":51},[41,174,175],{"class":84}," color",[41,177,59],{"class":51},[41,179,167],{"class":51},[41,181,182],{"class":90},"fff",[41,184,94],{"class":51},[41,186,97],{"class":51},[41,188,190],{"class":43,"line":189},8,[41,191,125],{"class":51},[11,193,195],{"id":194},"when-youll-hear-this","When You'll Hear This",[16,197,198],{},"\"Write a media query to hide the sidebar on mobile.\" \u002F \"Use prefers-color-scheme media query for automatic dark mode.\"",[200,201,202],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":36,"searchDepth":72,"depth":72,"links":204},[205,206,207,208],{"id":13,"depth":72,"text":14},{"id":21,"depth":72,"text":22},{"id":28,"depth":72,"text":29},{"id":194,"depth":72,"text":195},"frontend","A media query is a CSS if-statement based on screen conditions. 'If the screen is narrower than 768px, apply these styles.","beginner","md","m",{},"\u002Fterms\u002Fm\u002Fmedia-query",[217,218,219,220,221],"Breakpoint","Responsive Design","Mobile First","CSS","Viewport",{"title":5,"description":210},{"changefreq":224,"priority":225},"weekly",0.7,"terms\u002Fm\u002Fmedia-query","LqgUiSHzkz-Jxd8h2vBL53QVkHeBqBmpF3hHfBf-wpQ",[229,234,238,241,244],{"title":217,"path":230,"acronym":6,"category":231,"difficulty":232,"description":233},"\u002Fterms\u002Fb\u002Fbreakpoint","general","intermediate","A breakpoint is like a 'pause game' button you place on a specific line of code.",{"title":220,"path":235,"acronym":236,"category":209,"difficulty":211,"description":237},"\u002Fterms\u002Fc\u002Fcss","Cascading Style Sheets","CSS is the makeup and wardrobe for your HTML skeleton. It decides what color everything is, how big things are, and where stuff goes on the page.",{"title":219,"path":239,"acronym":6,"category":209,"difficulty":211,"description":240},"\u002Fterms\u002Fm\u002Fmobile-first","Mobile first means you design for the smallest screen first, then add styles as screens get bigger.",{"title":218,"path":242,"acronym":6,"category":209,"difficulty":211,"description":243},"\u002Fterms\u002Fr\u002Fresponsive-design","Responsive design means your website looks good on EVERY screen size — from a tiny phone to a giant 4K monitor.",{"title":221,"path":245,"acronym":6,"category":209,"difficulty":211,"description":246},"\u002Fterms\u002Fv\u002Fviewport","The viewport is the visible area of a webpage in the user's browser window. It changes depending on the device — small on a phone, huge on a 4K monitor.",1776518294646]