طراحی رسپانسیو با دستور @media screen در CSS

مسیح دیندار
مدیریت
عضو شده: 2021-04-12 14:23:35
2021-05-02 05:42:16

امروزه با افزایش تعداد کاربران موبایل، سایت ها باید به سمتی بروند که سایتشان برای موبایل هم آماده باشه. طراحی واکنشگرا یا رسپانسیو لازمه سایت های امروزی هستش و حتی گوگل هم موقع ایندکس سایت و نمایش نتایج جستجو، اگر سایتتون رسپانسیو نباشه، یک متن هشدار پایین سایت نشون میده.

طراحی رسپانسیو رو ما به دو صورت می تونیم انجام بدیم. 

  1. طراحی دو نوع حالت مختلف سایت با استفاده از PHP و ریدایرکت کاربران به طرح مورد نظر و سازگار با استفاده از دستورات PHP ریدایرکت و شناسایی دستگاه
  2. استفاده از دستور @media در CSS و شناسایی خودکار اندازه دستگاه کاربران و نمایش حالت مناسب با اندازه صفحه نمایشگر کاربر

ما اینجا حالت دوم رو می خواهیم یه مقدار توضیح بدیم. اول کار یه نمونه از دستور @media رو مشاهده کنید:

/* پس زمینه ما در اندازه عادی قرمز رنگ باشد */
body {
  background-color: red;
}

/* در صفحه نمایش با عرض 992 و پایین تر از اون به رنگ آبی باشد */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}

/* در صفحه نمایش با عرض 600 پیکسل و پایین تر از اون به رنگ سبز باشد */
@media screen and (max-width: 600px) {
  body {
    background-color: green;
  }
}

به این ترتیب دستورات CSS ما توی سایزهای مختلف صفحه نمایش بر اساس اندازه ای که داخل کد تعیین کردیم، سوئیچ خواهند شد و برای طراحی رسپانسیو میشه ازش بهره گرفت.

این دستور رو هم می تونیم به عنوان max-width استفاده کنیم و هم min-width . یه مثال برای حالت min-width هم ببینید:

/* رنگ پس زمینه ما به صورت عمومی قرمز باشد */
body {
  background-color: red;
}

/* اگر اندازه صفحه نمایش ما 992 پیکسل به بالا بود رنگ پس زمینه آبی باشد */
@media screen and (min-width: 992px) {
  body {
    background-color: blue;
  }
}

/* اگر اندازه صفحه نمایش 600 به بالا بود رنگ پس زمینه سبز باشد */
@media screen and (min-width: 600px) {
  body {
    background-color: green;
  }
}

هر دو حالت رو میتونیم استفاده کنیم ولی استفاده از حالت max-width بیشتر توصیه میشه.

حالا با استفاده از این دستور که من در اینجا با رنگ پس زمینه مثال زدم، شما می تونید جوری تنظیم کنید که برای مثال در حالت عادی، یک بخش از سایتتون برای صفحه نمایش های بزرگ، به صورت درون خطی نمایش داده بشه (flex) و در صورتی که به اندازه صفحه موبایل رسید، حالت نمایش یه block تغییر پیدا کنه تا زیرهم قرار بگیرند و همه عناصر داخل موبایل نمایش داده بشن.

موارد استفاده این دستور زیاد هست، اگر توی بخشی از سایتتون به مشکل برخوردید، کدی که می خواهید رسپانسیو بشه رو توی پاسخ همین تاپیک ارسال کنید تا کد اصلاح شده رو خدمتتون تقدیم کنم.