استفاده از مدیا کوئری – media only

در این ویدئو به اموزش مدیا کوئری (media query) میپردازیم و روش ساخت ستونهای واکنش گرا را توضیح میدهیم.

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

مشاهده ویدئو
صفحه سه ستونه در حالت دسکتاپ
صفحه سه ستونه در حالت دسکتاپ

زمانی که همین صفحه وب را بخواهیم در دستگاههای موبایل یا تبلت مشاهده کنیم، چون عرض این دستگاهها کمتر از لپتاپ هستند، در نتیجه میتوانیم توسط مدیا کوئری ها این تغیر سایز عرض دستگاه را تشخیص داده و چیدمان مناسب برای این دستگاهها را طراحی کنیم.در تصویر زیر میبینیم که وقتی عرض دستگاه از 768px کمتر شود، چیدمان صفحه بصورت تک ستونه نمایش داده میشود. مانند تصویر زیر

نمایش در حالت تبلت و موبایل بصورت تک ستونه
نمایش در حالت تبلت و موبایل بصورت تک ستونه

کدی که برای مدیا کوئری نوشته شد بصورت زیر است

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
      width: 100%;
    }
  }
مشاهده ویدئوی آموزشی

مطالب مرتبط

2 دیدگاه‌

  1. رحیم گفت:

    مچکرم.عالی بود👍

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

چهار + 7 =