[{"data":1,"prerenderedAt":280},["ShallowReactive",2],{"term-m\u002Fmobile-first":3,"related-m\u002Fmobile-first":262},{"id":4,"title":5,"acronym":6,"body":7,"category":243,"description":244,"difficulty":245,"extension":246,"letter":247,"meta":248,"navigation":95,"path":249,"related":250,"seo":256,"sitemap":257,"stem":260,"subcategory":6,"__hash__":261},"terms\u002Fterms\u002Fm\u002Fmobile-first.md","Mobile First",null,{"type":8,"value":9,"toc":237},"minimark",[10,15,19,23,26,30,226,230,233],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"Mobile first means you design for the smallest screen first, then add styles as screens get bigger. It's a mindset flip — instead of 'make desktop look good then shrink it', you 'make mobile look good then grow it'. Forces you to prioritize what actually matters.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Mobile-first is a design and development strategy where the base CSS targets small screens (mobile), and media queries using min-width progressively enhance the layout for larger screens. This approach aligns with how most users access the web and tends to produce cleaner, lighter CSS.",[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* Mobile first: base styles for small screens *\u002F\n.card { font-size: 14px; padding: 1rem; }\n\n\u002F* Tablet and up *\u002F\n@media (min-width: 768px) {\n  .card { font-size: 16px; padding: 2rem; }\n}\n\n\u002F* Desktop and up *\u002F\n@media (min-width: 1024px) {\n  .card { font-size: 18px; padding: 3rem; }\n}\n","css","",[38,39,40,49,90,97,103,127,157,163,168,174,192,221],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u002F* Mobile first: base styles for small screens *\u002F\n",[41,50,52,56,60,63,67,70,74,77,80,82,85,87],{"class":43,"line":51},2,[41,53,55],{"class":54},"sMK4o",".",[41,57,59],{"class":58},"sBMFI","card",[41,61,62],{"class":54}," {",[41,64,66],{"class":65},"sqsOY"," font-size",[41,68,69],{"class":54},":",[41,71,73],{"class":72},"sbssI"," 14px",[41,75,76],{"class":54},";",[41,78,79],{"class":65}," padding",[41,81,69],{"class":54},[41,83,84],{"class":72}," 1rem",[41,86,76],{"class":54},[41,88,89],{"class":54}," }\n",[41,91,93],{"class":43,"line":92},3,[41,94,96],{"emptyLinePlaceholder":95},true,"\n",[41,98,100],{"class":43,"line":99},4,[41,101,102],{"class":47},"\u002F* Tablet and up *\u002F\n",[41,104,106,110,113,116,118,121,124],{"class":43,"line":105},5,[41,107,109],{"class":108},"s7zQu","@media",[41,111,112],{"class":54}," (",[41,114,115],{"class":58},"min-width",[41,117,69],{"class":54},[41,119,120],{"class":72}," 768px",[41,122,123],{"class":54},")",[41,125,126],{"class":54}," {\n",[41,128,130,133,135,137,139,141,144,146,148,150,153,155],{"class":43,"line":129},6,[41,131,132],{"class":54},"  .",[41,134,59],{"class":58},[41,136,62],{"class":54},[41,138,66],{"class":65},[41,140,69],{"class":54},[41,142,143],{"class":72}," 16px",[41,145,76],{"class":54},[41,147,79],{"class":65},[41,149,69],{"class":54},[41,151,152],{"class":72}," 2rem",[41,154,76],{"class":54},[41,156,89],{"class":54},[41,158,160],{"class":43,"line":159},7,[41,161,162],{"class":54},"}\n",[41,164,166],{"class":43,"line":165},8,[41,167,96],{"emptyLinePlaceholder":95},[41,169,171],{"class":43,"line":170},9,[41,172,173],{"class":47},"\u002F* Desktop and up *\u002F\n",[41,175,177,179,181,183,185,188,190],{"class":43,"line":176},10,[41,178,109],{"class":108},[41,180,112],{"class":54},[41,182,115],{"class":58},[41,184,69],{"class":54},[41,186,187],{"class":72}," 1024px",[41,189,123],{"class":54},[41,191,126],{"class":54},[41,193,195,197,199,201,203,205,208,210,212,214,217,219],{"class":43,"line":194},11,[41,196,132],{"class":54},[41,198,59],{"class":58},[41,200,62],{"class":54},[41,202,66],{"class":65},[41,204,69],{"class":54},[41,206,207],{"class":72}," 18px",[41,209,76],{"class":54},[41,211,79],{"class":65},[41,213,69],{"class":54},[41,215,216],{"class":72}," 3rem",[41,218,76],{"class":54},[41,220,89],{"class":54},[41,222,224],{"class":43,"line":223},12,[41,225,162],{"class":54},[11,227,229],{"id":228},"when-youll-hear-this","When You'll Hear This",[16,231,232],{},"\"Always design mobile first — it forces you to focus on what's important.\" \u002F \"Tailwind is mobile-first by default: sm: md: lg: go upward.\"",[234,235,236],"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 .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":238},[239,240,241,242],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":228,"depth":51,"text":229},"frontend","Mobile first means you design for the smallest screen first, then add styles as screens get bigger.","beginner","md","m",{},"\u002Fterms\u002Fm\u002Fmobile-first",[251,252,253,254,255],"Responsive Design","Media Query","Breakpoint","Viewport","Tailwind",{"title":5,"description":244},{"changefreq":258,"priority":259},"weekly",0.7,"terms\u002Fm\u002Fmobile-first","QYMcQBCsArSdAGlkIdOjLKTnZ4HNkktIv0M9XlBearU",[263,268,271,274,277],{"title":253,"path":264,"acronym":6,"category":265,"difficulty":266,"description":267},"\u002Fterms\u002Fb\u002Fbreakpoint","general","intermediate","A breakpoint is like a 'pause game' button you place on a specific line of code.",{"title":252,"path":269,"acronym":6,"category":243,"difficulty":245,"description":270},"\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":251,"path":272,"acronym":6,"category":243,"difficulty":245,"description":273},"\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":255,"path":275,"acronym":6,"category":243,"difficulty":245,"description":276},"\u002Fterms\u002Ft\u002Ftailwind","Tailwind is a CSS framework where instead of writing CSS files you add utility classes directly to your HTML.",{"title":254,"path":278,"acronym":6,"category":243,"difficulty":245,"description":279},"\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.",1776518295539]