یادگیری پیکربندی با CSS

media queries

«طراحی واکنش‌گرا (responsive)» نوعی استراتژی در طراحی سایت است که به ویژگی‌های مرورگر و دستگاه «پاسخ» می‌دهد... و سعی می‌کند که خوب باشد، مهم نیست چه شرایطی حاکم باشد!

قویترین ابزار برای این منظور media query‌ها هستند. حال بیاید، آن مثالی را که داشتیم و در آن اندازه‌ها با درصد بودند، تغییر دهیم، به طوری که اگر اندازه ی صفحه ی مرورگر خیلی باریک شد، همه چیز را در یک ستون نمایش دهد، و اگر پهنا با اندازه ی کافی بود، همانطور مثل حالت قبل باشد:

@media (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media (max-width:599px) {
  nav li {
    display: inline;
  }
}

حال اگر اندازه ی صفحه ی مرورگر را تغییر بدهید، خیلی جالب خواهد بود!

</section>

نفس باد صبا مشک فشان خواهد شد/عالم پیر دگرباره جوان خواهد شد/ارغوان جام عقیقی به سمن خواهد داد/چشم نرگس به شقایق نگران خواهد شد/این تطاول که کشید از غم هجران بلبل/تا سراپرده گل نعره زنان خواهد شد/گر ز مسجد به خرابات شدم خرده مگیر/مجلس وعظ دراز است و زمان خواهد شد/ای دل ار عشرت امروز به فردا فکنی/مایه نقد بقا را که ضمان خواهد شد/ماه شعبان منه از دست قدح کاین خورشید/از نظر تا شب عید رمضان خواهد شد/گل عزیز است غنیمت شمریدش صحبت/که به باغ آمد از این راه و از آن خواهد شد/مطربا مجلس انس است غزل خوان و سرود/چند گویی که چنین رفت و چنان خواهد شد/حافظ از بهر تو آمد سوی اقلیم وجود/قدمی نه به وداعش که روان خواهد شد

</section>

بسیار عالی! حالا این پیکربندی خیلی عالی خواهد بود، حتی در موبایل‌ها! در اینجا چند سایت معروف که از mdia query‌ها به همین شکل استفاده می‌کنند را می‌توانید بیابید. علاوه بر min-width و max-width چیزهای زیاد دیگیری هم هستند که می‌توانند مورد استفاده قرار گیرند: مستندات MDN را برای اطلاعات بیشتر بررسی کنید:

توضیحات بیشتر

همچنین می‌توانید برای بهتر کردن نمایش کدهای خودتان در موبایل‌ها از meta viewport استفاده کنید.