[{"data":1,"prerenderedAt":256},["ShallowReactive",2],{"lesson:t4-s02-media-queries":3,"course:taropood":60},{"meta":4,"prev":11,"next":15,"sections":19},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},true,2,"t4-s02-media-queries","book",4,"فصل ۰۲ — media query",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},1,"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},3,"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",[20,24,27,32,35,38,41,44,47,50,53,57],{"kind":21,"heading":22,"html":23},"normal","در این فصل چه می‌سازی","\u003Ch2 id=\"در-این-فصل-چه-می‌سازی\">در این فصل چه می‌سازی\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84-%DA%86%D9%87-%D9%85%DB%8C%E2%80%8C%D8%B3%D8%A7%D8%B2%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>آخر این فصل یک گالری از کارت‌ها داری که چیدمانش را با عرضِ صفحه عوض می‌کند: روی موبایلِ باریک یک ستون، و روی صفحهٔ پهن سه ستون. فرقِ این فصل با فصل قبل مهم است — آنجا صفحه فقط جمع و باز می‌شد، اینجا واقعاً \u003Cstrong>چیدمان\u003C\u002Fstrong> عوض می‌شود. ابزارش یک قاعدهٔ تازه است به اسم \u003Ccode>media query\u003C\u002Fcode>: راهی که به CSS بگویی «این استایل‌ها فقط وقتی اجرا شوند که عرضِ صفحه از فلان مقدار بیشتر باشد».\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-one-to-three-columns.654db11047.160.webp 160w, \u002F_img\u002F01-image-one-to-three-columns.654db11047.320.webp 320w, \u002F_img\u002F01-image-one-to-three-columns.654db11047.640.webp 640w, \u002F_img\u002F01-image-one-to-three-columns.654db11047.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-one-to-three-columns.654db11047.1280.jpg\" srcset=\"\u002F_img\u002F01-image-one-to-three-columns.654db11047.160.jpg 160w, \u002F_img\u002F01-image-one-to-three-columns.654db11047.320.jpg 320w, \u002F_img\u002F01-image-one-to-three-columns.654db11047.640.jpg 640w, \u002F_img\u002F01-image-one-to-three-columns.654db11047.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"یک گالریِ کارت که با عرضِ صفحه چیدمانش عوض می‌شود: روی نمایشِ باریک یک ستونِ عمودی، و روی نمایشِ پهن سه ستونِ کنارِ هم، با یک خطِ آستانه که مرزِ تغییر را نشان می‌دهد\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>آخر این فصل می‌توانی:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>یک \u003Ccode>@media\u003C\u002Fcode> بنویسی که فقط در عرض‌های مشخص اجرا شود\u003C\u002Fli>\n\u003Cli>بگویی \u003Ccode>breakpoint\u003C\u002Fcode> چیست و کجای طرح باید گذاشته شود\u003C\u002Fli>\n\u003Cli>فرقِ \u003Ccode>min-width\u003C\u002Fcode> و \u003Ccode>max-width\u003C\u002Fcode> را بگویی و درست را انتخاب کنی\u003C\u002Fli>\n\u003Cli>یک چیدمان را mobile-first بنویسی، از یک ستون به سه ستون\u003C\u002Fli>\n\u003C\u002Ful>\n",{"kind":21,"heading":25,"html":26},"قبل از شروع","\u003Ch2 id=\"قبل-از-شروع\">قبل از شروع\u003Ca class=\"head-anchor\" href=\"#%D9%82%D8%A8%D9%84-%D8%A7%D8%B2-%D8%B4%D8%B1%D9%88%D8%B9\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>از فصل ۱ (همین ترم):\u003C\u002Fstrong> meta viewport و mobile-first — این فصل مستقیم روی همان‌ها سوار است.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از ترم ۳:\u003C\u002Fstrong> \u003Ccode>display: grid\u003C\u002Fcode>، \u003Ccode>grid-template-columns\u003C\u002Fcode> و واحد \u003Ccode>fr\u003C\u002Fcode> — گالری را با همین می‌سازیم.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از ترم ۳:\u003C\u002Fstrong> \u003Ccode>gap\u003C\u002Fcode> — فاصلهٔ بین کارت‌ها.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>مثل همیشه فقط یک مرورگر لازم داری، یا فقط همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":28,"heading":29,"html":30,"embed":31},"lab","","— شش کارت در یک ستون می‌بینی. کارِ این فصل این است که یک @media اضافه کنی تا روی عرضِ پهن سه ستون شوند، و با کم و زیاد کردنِ عرضِ پیش‌نمایش، لحظهٔ تغییر را با چشمت ببینی","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-4-responsive\u002Fsession-02-media-queries",{"kind":21,"heading":33,"html":34},"۱. media query یعنی چه","\u003Ch2 id=\"۱-media-query-یعنی-چه\">۱. media query یعنی چه\u003Ca class=\"head-anchor\" href=\"#%DB%B1-media-query-%DB%8C%D8%B9%D9%86%DB%8C-%DA%86%D9%87\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>تا اینجا هر قاعدهٔ CSS ای که نوشتی همیشه اجرا می‌شد. \u003Ccode>media query\u003C\u002Fcode> یک \u003Cstrong>شرط\u003C\u002Fstrong> دور یک دسته قاعده می‌گذارد: «این‌ها را فقط وقتی اعمال کن که یک چیزی دربارهٔ صفحه درست باشد» — معمولاً یک چیز دربارهٔ عرضِ صفحه. با آن می‌توانی به مرورگر بگویی «روی صفحه‌های پهن این‌طور بچین، روی باریک آن‌طور».\u003C\u002Fp>\n\u003Cp>شکلش این است: کلمهٔ \u003Ccode>@media\u003C\u002Fcode>، بعد شرط داخل پرانتز، بعد یک \u003Ccode>{ }\u003C\u002Fcode> که قاعده‌های معمولی داخلش می‌روند:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>@media (min-width: 700px) {\n  \u002F* har CSS injaa faghat rooye arze 700px va bishtar ejraa mishavad *\u002F\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>(min-width: 700px)\u003C\u002Fcode> یعنی «اگر عرضِ صفحه \u003Cstrong>حداقل\u003C\u002Fstrong> ۷۰۰ پیکسل است». هر قاعده‌ای که داخلِ آن \u003Ccode>{ }\u003C\u002Fcode> بگذاری، فقط روی صفحه‌های ۷۰۰ پیکسل و پهن‌تر اجرا می‌شود؛ روی باریک‌تر انگار اصلاً نوشته نشده. بیرونِ \u003Ccode>@media\u003C\u002Fcode> قاعده‌های همیشگی می‌مانند — پایهٔ کار.\u003C\u002Fp>\n",{"kind":21,"heading":36,"html":37},"۲. اولین @media: از یک ستون به سه ستون","\u003Ch2 id=\"۲-اولین-@media-از-یک-ستون-به-سه-ستون\">۲. اولین \u003Ccode>@media\u003C\u002Fcode>: از یک ستون به سه ستون\u003Ca class=\"head-anchor\" href=\"#%DB%B2-%D8%A7%D9%88%D9%84%DB%8C%D9%86-%40media-%D8%A7%D8%B2-%DB%8C%DA%A9-%D8%B3%D8%AA%D9%88%D9%86-%D8%A8%D9%87-%D8%B3%D9%87-%D8%B3%D8%AA%D9%88%D9%86\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>بیا گالری را بسازیم. اول HTML: یک \u003Ccode><main>\u003C\u002Fcode> با شش کارت. \u003Ccode><article>\u003C\u002Fcode> را برای کارت به‌کار می‌بریم چون هر کارت یک تکهٔ مستقل است، همان‌طور که در ترم ۱ یاد گرفتی:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><main class="grid">\n  <article class="card">یک<\u002Farticle>\n  <article class="card">دو<\u002Farticle>\n  <article class="card">سه<\u002Farticle>\n  <article class="card">چهار<\u002Farticle>\n  <article class="card">پنج<\u002Farticle>\n  <article class="card">شش<\u002Farticle>\n<\u002Fmain>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>حالا استایلِ پایه. چون mobile-first کار می‌کنیم، حالتِ پیش‌فرض همان حالتِ موبایل است: یک ستون. این قاعده‌ها بیرونِ هر \u003Ccode>@media\u003C\u002Fcode> می‌مانند تا همیشه اجرا شوند:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.grid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n}\n\n.card {\n  background-color: #2a6b93;\n  color: #ffffff;\n  padding: 24px;\n  border-radius: 8px;\n  text-align: center;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> شش کارتِ آبی در یک ستونِ عمودی می‌بینی، زیرِ هم. این حالتِ موبایل است و باید ساده و بی‌عیب باشد. حالا امکانِ «صفحهٔ پهن» را رویش سوار می‌کنیم.\u003C\u002Fp>\n\u003Cp>یک \u003Ccode>@media\u003C\u002Fcode> اضافه کن که فقط روی عرضِ پهن، ستون‌ها را سه‌تا کند:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>@media (min-width: 700px) {\n  .grid {\n    grid-template-columns: 1fr 1fr 1fr;\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حالا عرضِ پیش‌نمایش را آرام پهن کن. تا وقتی باریک است یک ستون می‌ماند؛ لحظه‌ای که از ۷۰۰ پیکسل رد شد، ناگهان سه ستون می‌شود. باریکش کن، دوباره یک ستون. همین جهش، قلبِ \u003Ccode>media query\u003C\u002Fcode> است.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> داخلِ یک \u003Ccode>@media\u003C\u002Fcode> هر تعداد قاعده که بخواهی می‌گذاری، نه فقط یکی. سرِ یک breakpoint معمولاً چند چیز با هم عوض می‌شوند — مثلاً هم ستون‌ها بیشتر می‌شوند، هم \u003Ccode>gap\u003C\u002Fcode> بازتر، هم فونتِ تیتر کمی بزرگ‌تر. همه را کنارِ هم داخلِ همان یک \u003Ccode>@media (min-width: 700px)\u003C\u002Fcode> بنویس؛ لازم نیست برای هر property یک query جدا بسازی.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":39,"html":40},"۳. breakpoint چیست","\u003Ch2 id=\"۳-breakpoint-چیست\">۳. breakpoint چیست\u003Ca class=\"head-anchor\" href=\"#%DB%B3-breakpoint-%DA%86%DB%8C%D8%B3%D8%AA\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>آن عددِ ۷۰۰ که چیدمان سرِ آن عوض شد، یک اسم دارد: \u003Ccode>breakpoint\u003C\u002Fcode>. یعنی «نقطهٔ شکست» — عرضی که در آن، طرحِ صفحه از یک حالت به حالتِ دیگر می‌رود. هر سایتی چند \u003Ccode>breakpoint\u003C\u002Fcode> دارد؛ جاهایی که تصمیم می‌گیری چیدمان عوض شود.\u003C\u002Fp>\n\u003Cp>\u003Ccode>breakpoint\u003C\u002Fcode> را از کجا انتخاب کنیم؟ بهترین راهنما خودِ \u003Cstrong>محتوا\u003C\u002Fstrong>ست، نه اندازهٔ یک گوشیِ خاص. عرضِ پیش‌نمایش را آرام پهن کن و ببین کجا چیدمانت شروع به بدشکل‌شدن می‌کند — مثلاً کارت‌ها آن‌قدر پهن می‌شوند که زشت‌اند، یا متن خیلی کش می‌آید. همان‌جا یک \u003Ccode>breakpoint\u003C\u002Fcode> بگذار. عددهایی مثل ۶۰۰، ۷۰۰ و ۹۰۰ نقطه‌های شروعِ رایج‌اند، ولی قانونِ آسمانی نیستند.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> \u003Ccode>breakpoint\u003C\u002Fcode> را با عددِ ثابتِ گوشیِ امروز گره نزن؛ گوشی‌ها هر سال عوض می‌شوند. به‌جای «این دقیقاً عرضِ فلان موبایل است» فکر کن «اینجا چیدمانم بد می‌شود، پس اینجا عوضش می‌کنم». این‌طوری طرحت با هر دستگاهِ آینده هم جور درمی‌آید.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>\u003Cstrong>قبل از ادامه، جواب بده:\u003C\u002Fstrong> اگر یک قاعده را داخلِ \u003Ccode>@media (min-width: 700px)\u003C\u002Fcode> بگذاری، روی یک موبایلِ ۳۶۰ پیکسلی اجرا می‌شود؟ (نه — چون ۳۶۰ کمتر از ۷۰۰ است، شرط برقرار نیست.)\u003C\u002Fp>\n",{"kind":21,"heading":42,"html":43},"۴. min-width در برابر max-width","\u003Ch2 id=\"۴-min-width-در-برابر-max-width\">۴. \u003Ccode>min-width\u003C\u002Fcode> در برابر \u003Ccode>max-width\u003C\u002Fcode>\u003Ca class=\"head-anchor\" href=\"#%DB%B4-min-width-%D8%AF%D8%B1-%D8%A8%D8%B1%D8%A7%D8%A8%D8%B1-max-width\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>دو جهت برای شرط داری:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode>(min-width: 700px)\u003C\u002Fcode> یعنی «عرض \u003Cstrong>حداقل\u003C\u002Fstrong> ۷۰۰» — از ۷۰۰ به بالا. این جهتِ mobile-first است: پایه را برای موبایل می‌نویسی، بعد با \u003Ccode>min-width\u003C\u002Fcode> امکاناتِ صفحهٔ بزرگ را \u003Cstrong>اضافه\u003C\u002Fstrong> می‌کنی.\u003C\u002Fli>\n\u003Cli>\u003Ccode>(max-width: 700px)\u003C\u002Fcode> یعنی «عرض \u003Cstrong>حداکثر\u003C\u002Fstrong> ۷۰۰» — از ۷۰۰ به پایین. این جهتِ desktop-first است: پایه را برای دسکتاپ می‌نویسی، بعد برای صفحهٔ کوچک چیزها را پس می‌گیری.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>هر دو کار می‌کنند، ولی در تاروپود mobile-first را انتخاب می‌کنیم، پس \u003Ccode>min-width\u003C\u002Fcode> ابزارِ اصلیِ توست. دلیلش همان است که فصل قبل گفتیم: از ساده به پیچیده رفتن مطمئن‌تر است. با \u003Ccode>min-width\u003C\u002Fcode>، پایه‌ات ساده‌ترین حالت است و هر \u003Ccode>@media\u003C\u002Fcode> فقط چیزی رویش می‌گذارد.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-min-vs-max-width.6fbf6f44b0.160.webp 160w, \u002F_img\u002F02-image-min-vs-max-width.6fbf6f44b0.320.webp 320w, \u002F_img\u002F02-image-min-vs-max-width.6fbf6f44b0.640.webp 640w, \u002F_img\u002F02-image-min-vs-max-width.6fbf6f44b0.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-min-vs-max-width.6fbf6f44b0.1280.jpg\" srcset=\"\u002F_img\u002F02-image-min-vs-max-width.6fbf6f44b0.160.jpg 160w, \u002F_img\u002F02-image-min-vs-max-width.6fbf6f44b0.320.jpg 320w, \u002F_img\u002F02-image-min-vs-max-width.6fbf6f44b0.640.jpg 640w, \u002F_img\u002F02-image-min-vs-max-width.6fbf6f44b0.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"یک محورِ افقیِ عرض با یک نقطهٔ breakpoint در وسط: بازهٔ سمتِ باریک با یک رنگ برای max-width و بازهٔ سمتِ پهن با رنگی دیگر برای min-width، تا نشان دهد هر جهت کدام طرفِ مرز را می‌پوشاند\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n",{"kind":21,"heading":45,"html":46},"۵. وقتی دو query دعوا می‌کنند","\u003Ch2 id=\"۵-وقتی-دو-query-دعوا-می‌کنند\">۵. وقتی دو query دعوا می‌کنند\u003Ca class=\"head-anchor\" href=\"#%DB%B5-%D9%88%D9%82%D8%AA%DB%8C-%D8%AF%D9%88-query-%D8%AF%D8%B9%D9%88%D8%A7-%D9%85%DB%8C%E2%80%8C%DA%A9%D9%86%D9%86%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>حالا یک اشتباهِ رایج و آموزنده. فرض کن به‌جای mobile-first، بخواهی هر دو حالت را جدا با query بنویسی — یکی برای باریک، یکی برای پهن — و هر دو را روی همان عددِ ۷۰۰ بگذاری:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>@media (max-width: 700px) {\n  .grid { grid-template-columns: 1fr; }\n}\n\n@media (min-width: 700px) {\n  .grid { grid-template-columns: 1fr 1fr 1fr; }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>به‌نظر منطقی می‌آید: زیرِ ۷۰۰ یک ستون، بالای ۷۰۰ سه ستون. ولی عرضِ پیش‌نمایش را دقیقاً روی ۷۰۰ بگذار. یک مشکلِ ظریف هست: در \u003Cstrong>دقیقاً\u003C\u002Fstrong> ۷۰۰ پیکسل، هر دو شرط برقرارند — \u003Ccode>max-width: 700\u003C\u002Fcode> یعنی «۷۰۰ یا کمتر» و \u003Ccode>min-width: 700\u003C\u002Fcode> یعنی «۷۰۰ یا بیشتر»، و ۷۰۰ در هر دو می‌گنجد. پس هر دو قاعده اجرا می‌شوند و آن‌که در فایل پایین‌تر است برنده می‌شود. مرزِ دو query روی هم افتاده.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> روی عددِ مرزی رفتارِ عجیب دیدی، یا مطمئن نیستی کدام قاعده برنده است؟ علتش همین هم‌پوشانیِ \u003Ccode>min-width: 700\u003C\u002Fcode> و \u003Ccode>max-width: 700\u003C\u002Fcode> روی یک عددِ یکسان است. راهِ درست این نیست که مرز را با اعشار جابه‌جا کنی؛ راهِ تمیز این است که اصلاً دو query نگذاری. mobile-first بنویس: پایه را یک‌ستونه بگذار (بی‌هیچ query) و \u003Cstrong>فقط یک\u003C\u002Fstrong> \u003Ccode>@media (min-width: 700px)\u003C\u002Fcode> برای سه‌ستونه اضافه کن. حالا هیچ دو شرطی نیست که سرِ مرز دعوا کنند — و همان کدِ بخش ۲ است.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":48,"html":49},"کد کاملِ این فصل","\u003Ch2 id=\"کد-کاملِ-این-فصل\">کد کاملِ این فصل\u003Ca class=\"head-anchor\" href=\"#%DA%A9%D8%AF-%DA%A9%D8%A7%D9%85%D9%84%D9%90-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>این هم دو فایلِ کامل، یک‌جا. اول \u003Ccode>index.html\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><!-- index.html -->\n<!DOCTYPE html>\n<html lang="fa" dir="rtl">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1">\n    <title>چیدمان responsive<\u002Ftitle>\n    <link rel="stylesheet" href="styles.css">\n  <\u002Fhead>\n  <body>\n    <main class="grid">\n      <article class="card">یک<\u002Farticle>\n      <article class="card">دو<\u002Farticle>\n      <article class="card">سه<\u002Farticle>\n      <article class="card">چهار<\u002Farticle>\n      <article class="card">پنج<\u002Farticle>\n      <article class="card">شش<\u002Farticle>\n    <\u002Fmain>\n  <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>و \u003Ccode>styles.css\u003C\u002Fcode> — دقت کن که فقط \u003Cstrong>یک\u003C\u002Fstrong> \u003Ccode>@media\u003C\u002Fcode> با \u003Ccode>min-width\u003C\u002Fcode> داریم، دقیقاً همان راهِ تمیزِ mobile-first:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>\u002F* styles.css *\u002F\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  background-color: #f6edda;\n  margin: 0;\n  padding: 16px;\n}\n\n.grid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n}\n\n.card {\n  background-color: #2a6b93;\n  color: #ffffff;\n  padding: 24px;\n  border-radius: 8px;\n  text-align: center;\n}\n\n@media (min-width: 700px) {\n  .grid {\n    grid-template-columns: 1fr 1fr 1fr;\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> روی صفحه شش کارتِ آبی می‌بینی که روی باریک یک‌ستونه و روی پهن سه‌ستونه‌اند. عرضِ پیش‌نمایش را از باریک تا پهن بکش و لحظهٔ جهش روی ۷۰۰ را ببین.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> از دستیار AI ات بپرس «یک \u003Ccode>media query\u003C\u002Fcode> بنویس که این گالری روی صفحهٔ متوسط دو ستون و روی صفحهٔ پهن سه ستون شود». جوابش را خط‌به‌خط بخوان: چند تا \u003Ccode>@media\u003C\u002Fcode> گذاشته؟ \u003Ccode>min-width\u003C\u002Fcode> است یا \u003Ccode>max-width\u003C\u002Fcode>؟ آیا mobile-first است؟ بعد همان کد را در آزمایشگاه بگذار و عرض را بکش تا با چشمت ببینی سرِ مرزها درست جهش می‌کند یا نه — AI دربارهٔ layout با اطمینان اشتباه می‌گوید.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":51,"html":52},"واژه‌های تازهٔ این فصل","\u003Ch2 id=\"واژه‌های-تازهٔ-این-فصل\">واژه‌های تازهٔ این فصل\u003Ca class=\"head-anchor\" href=\"#%D9%88%D8%A7%DA%98%D9%87%E2%80%8C%D9%87%D8%A7%DB%8C-%D8%AA%D8%A7%D8%B2%D9%87%D9%94-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>کلمه\u003C\u002Fth>\n\u003Cth>تلفظ به حروف فارسی\u003C\u002Fth>\n\u003Cth>یعنی چه\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>media query\u003C\u002Ftd>\n\u003Ctd>مدیا کوئری\u003C\u002Ftd>\n\u003Ctd>شرطی که یک دسته قاعدهٔ CSS را فقط در وضعیتِ مشخصی از صفحه اجرا می‌کند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>@media\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>اَت-مدیا\u003C\u002Ftd>\n\u003Ctd>کلمه‌ای که یک media query را شروع می‌کند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>breakpoint\u003C\u002Ftd>\n\u003Ctd>بریک‌پوینت\u003C\u002Ftd>\n\u003Ctd>عرضی که در آن چیدمانِ صفحه از یک حالت به حالتِ دیگر می‌رود\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>min-width\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>مین-ویدث\u003C\u002Ftd>\n\u003Ctd>شرطِ «عرض حداقل این‌قدر»؛ جهتِ mobile-first\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>max-width\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>مکس-ویدث\u003C\u002Ftd>\n\u003Ctd>شرطِ «عرض حداکثر این‌قدر»؛ جهتِ desktop-first\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n",{"kind":54,"heading":55,"html":56},"checkpoint","تمرین‌ها","\u003Ch2 id=\"تمرین‌ها\">تمرین‌ها\u003Ca class=\"head-anchor\" href=\"#%D8%AA%D9%85%D8%B1%DB%8C%D9%86%E2%80%8C%D9%87%D8%A7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>قبل از تمرین، بدون نگاه‌کردن به بالا جواب بده: چرا mobile-first یعنی استفاده از \u003Ccode>min-width\u003C\u002Fcode> نه \u003Ccode>max-width\u003C\u002Fcode>؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> همان گالری را بردار و یک \u003Ccode>breakpoint\u003C\u002Fcode> دوم اضافه کن: روی باریک یک ستون، از ۵۰۰ پیکسل دو ستون، و از ۹۰۰ پیکسل سه ستون. (راهنما: دو \u003Ccode>@media\u003C\u002Fcode> با \u003Ccode>min-width\u003C\u002Fcode>، یکی ۵۰۰ یکی ۹۰۰.) عرض را بکش و مطمئن شو در هر دو مرز درست جهش می‌کند.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> همان چیدمان را یک بار desktop-first بنویس: پایه را سه‌ستونه بگذار و با \u003Ccode>@media (max-width: 700px)\u003C\u002Fcode> روی باریک یک‌ستونه‌اش کن. بعد با mobile-first مقایسه‌اش کن و در یک جمله بنویس کدام خواناتر است و چرا — و مطمئن شو این‌بار مرزها روی هم نمی‌افتند.\u003C\u002Fp>\n",{"kind":21,"heading":58,"html":59},"در فصل بعد","\u003Ch2 id=\"در-فصل-بعد\">در فصل بعد\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D9%81%D8%B5%D9%84-%D8%A8%D8%B9%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>الان می‌توانی چیدمانِ صفحه را با عرض عوض کنی. ولی یک چیزِ مهم هنوز جا مانده: \u003Cstrong>تصویرها\u003C\u002Fstrong>. یک عکس به‌طور پیش‌فرض به \u003Ccode>media query\u003C\u002Fcode> گوش نمی‌دهد و می‌تواند از جعبه‌اش بیرون بزند یا بدشکل شود. فصل بعد سراغِ همین می‌رویم: با \u003Ccode>max-width: 100%\u003C\u002Fcode>، \u003Ccode>object-fit\u003C\u002Fcode> و \u003Ccode>srcset\u003C\u002Fcode> یاد می‌گیری تصویرها را هم مثل بقیهٔ صفحه responsive کنی.\u003C\u002Fp>\n",{"course":61,"entitled":69,"lessons":70,"payments_enabled":69,"terms":255,"live":5},{"active_window":62,"effective_price_toman":63,"free":5,"lesson_count":64,"price_toman":65,"slug":66,"summary_fa":67,"title_fa":68},null,0,61,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[71,74,77,80,83,87,91,95,99,103,107,110,113,116,119,122,125,128,131,134,137,141,144,147,150,153,156,159,162,165,168,171,174,175,176,177,180,183,186,189,192,195,198,201,204,207,210,213,216,219,222,225,228,231,234,237,240,243,246,249,252],{"free_preview":5,"order":12,"slug":72,"source":8,"term":12,"title_fa":73},"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":6,"slug":75,"source":8,"term":12,"title_fa":76},"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":16,"slug":78,"source":8,"term":12,"title_fa":79},"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":9,"slug":81,"source":8,"term":12,"title_fa":82},"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":84,"slug":85,"source":8,"term":12,"title_fa":86},5,"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":88,"slug":89,"source":8,"term":12,"title_fa":90},6,"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":92,"slug":93,"source":8,"term":12,"title_fa":94},7,"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":96,"slug":97,"source":8,"term":12,"title_fa":98},8,"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":100,"slug":101,"source":8,"term":12,"title_fa":102},9,"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":104,"slug":105,"source":8,"term":12,"title_fa":106},10,"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":12,"slug":108,"source":8,"term":6,"title_fa":109},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":6,"slug":111,"source":8,"term":6,"title_fa":112},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":16,"slug":114,"source":8,"term":6,"title_fa":115},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":9,"slug":117,"source":8,"term":6,"title_fa":118},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":84,"slug":120,"source":8,"term":6,"title_fa":121},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":88,"slug":123,"source":8,"term":6,"title_fa":124},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":92,"slug":126,"source":8,"term":6,"title_fa":127},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":96,"slug":129,"source":8,"term":6,"title_fa":130},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":100,"slug":132,"source":8,"term":6,"title_fa":133},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":104,"slug":135,"source":8,"term":6,"title_fa":136},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":138,"slug":139,"source":8,"term":6,"title_fa":140},11,"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":12,"slug":142,"source":8,"term":16,"title_fa":143},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":6,"slug":145,"source":8,"term":16,"title_fa":146},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":16,"slug":148,"source":8,"term":16,"title_fa":149},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":9,"slug":151,"source":8,"term":16,"title_fa":152},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":84,"slug":154,"source":8,"term":16,"title_fa":155},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":88,"slug":157,"source":8,"term":16,"title_fa":158},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":92,"slug":160,"source":8,"term":16,"title_fa":161},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":96,"slug":163,"source":8,"term":16,"title_fa":164},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":100,"slug":166,"source":8,"term":16,"title_fa":167},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":104,"slug":169,"source":8,"term":16,"title_fa":170},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":138,"slug":172,"source":8,"term":16,"title_fa":173},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},{"free_preview":5,"order":9,"slug":178,"source":8,"term":9,"title_fa":179},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":84,"slug":181,"source":8,"term":9,"title_fa":182},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":88,"slug":184,"source":8,"term":9,"title_fa":185},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":92,"slug":187,"source":8,"term":9,"title_fa":188},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":96,"slug":190,"source":8,"term":9,"title_fa":191},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":12,"slug":193,"source":8,"term":84,"title_fa":194},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":6,"slug":196,"source":8,"term":84,"title_fa":197},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":16,"slug":199,"source":8,"term":84,"title_fa":200},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":9,"slug":202,"source":8,"term":84,"title_fa":203},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":84,"slug":205,"source":8,"term":84,"title_fa":206},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":88,"slug":208,"source":8,"term":84,"title_fa":209},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":92,"slug":211,"source":8,"term":84,"title_fa":212},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":96,"slug":214,"source":8,"term":84,"title_fa":215},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":100,"slug":217,"source":8,"term":84,"title_fa":218},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":104,"slug":220,"source":8,"term":84,"title_fa":221},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":12,"slug":223,"source":8,"term":88,"title_fa":224},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":6,"slug":226,"source":8,"term":88,"title_fa":227},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":16,"slug":229,"source":8,"term":88,"title_fa":230},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":9,"slug":232,"source":8,"term":88,"title_fa":233},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":84,"slug":235,"source":8,"term":88,"title_fa":236},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":88,"slug":238,"source":8,"term":88,"title_fa":239},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":92,"slug":241,"source":8,"term":88,"title_fa":242},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":96,"slug":244,"source":8,"term":88,"title_fa":245},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":100,"slug":247,"source":8,"term":88,"title_fa":248},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":104,"slug":250,"source":8,"term":88,"title_fa":251},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":138,"slug":253,"source":8,"term":88,"title_fa":254},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827105137]