[{"data":1,"prerenderedAt":288},["ShallowReactive",2],{"term-r\u002Fresponsive-design":3,"related-r\u002Fresponsive-design":267},{"id":4,"title":5,"acronym":6,"body":7,"category":247,"description":248,"difficulty":249,"extension":250,"letter":251,"meta":252,"navigation":119,"path":253,"related":254,"seo":261,"sitemap":262,"stem":265,"subcategory":6,"__hash__":266},"terms\u002Fterms\u002Fr\u002Fresponsive-design.md","Responsive Design",null,{"type":8,"value":9,"toc":241},"minimark",[10,15,19,23,26,30,230,234,237],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"Responsive design means your website looks good on EVERY screen size — from a tiny phone to a giant 4K monitor. Instead of building separate sites, you write CSS that adapts and rearranges the layout depending on how wide the screen is.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Responsive design is an approach to web design where layouts fluidly adapt to different viewport sizes using fluid grids, flexible images, and CSS media queries. The goal is a single codebase that provides an optimal viewing experience across all devices from mobile to desktop.",[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","\u002F* Desktop: 3 columns. Tablet: 2 columns. Mobile: 1 column *\u002F\n.grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n}\n\n@media (max-width: 768px) {\n  .grid { grid-template-columns: repeat(2, 1fr); }\n}\n\n@media (max-width: 480px) {\n  .grid { grid-template-columns: 1fr; }\n}\n","css","",[38,39,40,49,63,80,108,114,121,144,177,182,187,205,225],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u002F* Desktop: 3 columns. Tablet: 2 columns. Mobile: 1 column *\u002F\n",[41,50,52,56,60],{"class":43,"line":51},2,[41,53,55],{"class":54},"sMK4o",".",[41,57,59],{"class":58},"sBMFI","grid",[41,61,62],{"class":54}," {\n",[41,64,66,70,73,77],{"class":43,"line":65},3,[41,67,69],{"class":68},"sqsOY","  display",[41,71,72],{"class":54},":",[41,74,76],{"class":75},"sTEyZ"," grid",[41,78,79],{"class":54},";\n",[41,81,83,86,88,92,95,99,102,105],{"class":43,"line":82},4,[41,84,85],{"class":68},"  grid-template-columns",[41,87,72],{"class":54},[41,89,91],{"class":90},"s2Zo4"," repeat",[41,93,94],{"class":54},"(",[41,96,98],{"class":97},"sbssI","3",[41,100,101],{"class":54},",",[41,103,104],{"class":97}," 1fr",[41,106,107],{"class":54},");\n",[41,109,111],{"class":43,"line":110},5,[41,112,113],{"class":54},"}\n",[41,115,117],{"class":43,"line":116},6,[41,118,120],{"emptyLinePlaceholder":119},true,"\n",[41,122,124,128,131,134,136,139,142],{"class":43,"line":123},7,[41,125,127],{"class":126},"s7zQu","@media",[41,129,130],{"class":54}," (",[41,132,133],{"class":58},"max-width",[41,135,72],{"class":54},[41,137,138],{"class":97}," 768px",[41,140,141],{"class":54},")",[41,143,62],{"class":54},[41,145,147,150,152,155,158,160,162,164,167,169,171,174],{"class":43,"line":146},8,[41,148,149],{"class":54},"  .",[41,151,59],{"class":58},[41,153,154],{"class":54}," {",[41,156,157],{"class":68}," grid-template-columns",[41,159,72],{"class":54},[41,161,91],{"class":90},[41,163,94],{"class":54},[41,165,166],{"class":97},"2",[41,168,101],{"class":54},[41,170,104],{"class":97},[41,172,173],{"class":54},");",[41,175,176],{"class":54}," }\n",[41,178,180],{"class":43,"line":179},9,[41,181,113],{"class":54},[41,183,185],{"class":43,"line":184},10,[41,186,120],{"emptyLinePlaceholder":119},[41,188,190,192,194,196,198,201,203],{"class":43,"line":189},11,[41,191,127],{"class":126},[41,193,130],{"class":54},[41,195,133],{"class":58},[41,197,72],{"class":54},[41,199,200],{"class":97}," 480px",[41,202,141],{"class":54},[41,204,62],{"class":54},[41,206,208,210,212,214,216,218,220,223],{"class":43,"line":207},12,[41,209,149],{"class":54},[41,211,59],{"class":58},[41,213,154],{"class":54},[41,215,157],{"class":68},[41,217,72],{"class":54},[41,219,104],{"class":97},[41,221,222],{"class":54},";",[41,224,176],{"class":54},[41,226,228],{"class":43,"line":227},13,[41,229,113],{"class":54},[11,231,233],{"id":232},"when-youll-hear-this","When You'll Hear This",[16,235,236],{},"\"Make it responsive — it looks broken on mobile.\" \u002F \"Use Tailwind's responsive prefixes instead of writing media queries by hand.\"",[238,239,240],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--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 .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 pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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 .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":51,"depth":51,"links":242},[243,244,245,246],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":232,"depth":51,"text":233},"frontend","Responsive design means your website looks good on EVERY screen size — from a tiny phone to a giant 4K monitor.","beginner","md","r",{},"\u002Fterms\u002Fr\u002Fresponsive-design",[255,256,257,258,259,260],"Mobile First","Media Query","Breakpoint","Flexbox","CSS Grid","Viewport",{"title":5,"description":248},{"changefreq":263,"priority":264},"weekly",0.7,"terms\u002Fr\u002Fresponsive-design","7hIbHP176rcHwvRsjTe_xs81-KFYrUTRixdtj5pehf8",[268,273,276,279,282,285],{"title":257,"path":269,"acronym":6,"category":270,"difficulty":271,"description":272},"\u002Fterms\u002Fb\u002Fbreakpoint","general","intermediate","A breakpoint is like a 'pause game' button you place on a specific line of code.",{"title":259,"path":274,"acronym":6,"category":247,"difficulty":271,"description":275},"\u002Fterms\u002Fc\u002Fcss-grid","CSS Grid is the two-dimensional layout system — rows AND columns at the same time. Think of it like a spreadsheet you can put your whole website into.",{"title":258,"path":277,"acronym":6,"category":247,"difficulty":249,"description":278},"\u002Fterms\u002Ff\u002Fflexbox","Flexbox is a CSS layout system that makes positioning elements in a row or column stupidly easy.",{"title":256,"path":280,"acronym":6,"category":247,"difficulty":249,"description":281},"\u002Fterms\u002Fm\u002Fmedia-query","A media query is a CSS if-statement based on screen conditions. 'If the screen is narrower than 768px, apply these styles.",{"title":255,"path":283,"acronym":6,"category":247,"difficulty":249,"description":284},"\u002Fterms\u002Fm\u002Fmobile-first","Mobile first means you design for the smallest screen first, then add styles as screens get bigger.",{"title":260,"path":286,"acronym":6,"category":247,"difficulty":249,"description":287},"\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.",1776518308134]