آموزش مدیا کوئری‌ در CSS برای طراحی واکنش‌گرا

آموزش مدیا کوئری‌ در CSS برای طراحی واکنش‌گرا

Introdunction to media queries

معرفی و نحوه استفاده از مدیا کوئری‌ها در CSS

 

نحوه تعریف مدیا کوئری (Media Query) در CSS

 

مدیا کوئری‌ها (Media Queries) دستورالعمل های css می باشند که استفاده از آنها برای طراحی وب سایت ها و وبلاگ های مدرن الزامی می باشد. مدیاکوئری شامل دستوراتی است که در سایزهای مختلف اسکرین تعریف می شوند.

با استفاده از Media Query می توان یک محتوای یکسان را در دستگاه های مختلف (موبایل، تبلت و دسکتاپ) به روش های گوناگونی نمایش داد. از دیدگاه عموم مردم، برای نمایش صحیح محتوای یک وب سایت در تمام اسکرین ها و دستگاه ها بکار میرود.

 

مدیاکوئری چه کاری انجام می دهد؟

توسط Media Query می توان برای اسکرین ها و سایزهای مختلف آنها، استایل های مجزایی تعریف کرد. بنابراین به زبان ساده می توان گفت:

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

 

مدیاکوئری چه کاری انجام می دهد؟

 

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

 

مدیا کوئری (Media Query) چگونه کار می کند؟

بصورت مختصر و مفید، مدیا کوئری ها دو کار انجام می دهند:

  • تشخیص اندازه اسکرین دستگاه کاربر.
  • اعمال استایل های css مختص هر اسکرین.

 

نحوه تعریف مدیا کوئری:

مدیا کوئری ها بخشی از یک فایل css هستند. بیایید همان مثال قبل را بررسی کنیم. در این مثال گفتیم که می خواهیم رنگ متن سایت در دسکتاپ قرمز باشد و در موبایل سبزرنگ باشد.

 

p {

        color: green;

    }

    @media(min-width:900px) {

        p {

            color: red;

        }

    }

 

اکنون می خواهیم خط به خط کدهای css فوق را توضیح دهیم.

به استایل زیر دقت کنید:

p{color:green;}

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

به استایل های بعدی توجه کنید:

@media(min-width:900px){p{color:red;}}

در استایل فوق، مدیاکوئری را تعریف کرده ایم و گفتیم که اگر عرض اسکرین دستگاه کاربر از ۹۰۰ پیکسل بزرگتر بود (min-width:900px)، رنگ متن قرمز شود.

 

نحوه تعریف مدیا کوئری (Media Query) در CSS

 

مدیا کوئری فوق می گوید:

  • @media: این بدین معنیست که یک مدیا کوئری در حال رخ دادن می باشد.
  • (min-width:900px){}: به معنای اینست که اگر عرض اسکرین حداقل ۹۰۰ پیکسل است، استایل های بین براکت {} باید اجرا شوند.
  • P{color:red;}: این همان استایلی است که اگر عرض اسکرین بزرگتر از ۹۰۰ پیکسل باشد اجرا خواهد شد.

 

استایل های CSS در دسکتاپ ها

 

استفاده از مدیا کوئری در طراحی ریسپانسیو:

دقت کنید که در استایل های فوق، در مورد اسکرین دسکتاپ (بزرگتر از ۹۰۰ پیکسل) صراحتا استایل color:red را بیان کردیم. اما در مورد اسکرین های کوچکتر (مانند موبایل و تبلت) استایلی را به صراحت تعریف نکردیم. بار دیگر به کدهای زیر توجه نمائید:

p{color:green;}

@media(min-width:900px){p{color:red;}}

  • استایل خط اول که کد css نرمال و غیرشرطی می باشد.
  • در خط دوم، مدیاکوئری تعریف شده است که بصورت شرطی می باشد.

 

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

 

استفاده از مدیا کوئری در طراحی ریسپانسیو

 

این چیزی است که گاها بعنوان mobile first design معرفی می شود. در روش فوق، ابتدا استایل های کلی و پیش فرض را تعریف کردیم، سپس با استفاده از مدیا کوئری، برای اسکرین های دسکتاپ، استایل های مختص آنها را اعلام کرده ایم (min-width:900px)

روش دیگری که می توان از مدیا کوئری در فایل های css سایت خود استفاده کنیم به این صورت است که ابتدا استایل های پیش فرض و غیر شرطی را تعریف کنیم و سپس برای دستگاه های کوچک مانند تبلت و موبایل، استایل های مربوطه را تعریف کنیم. در اینصورت، مدیا کوئری بصورت max-width:900px خواهد شد. یعنی کدهای داخل media query در صورتی اجرا شوند که عرض اسکرین از ۹۰۰ پیکسل کوچکتر باشد.

دوستان گرامی می توانید با مطالعه مقاله "آموزش تکنیک های CSS" با نکات و ترفندهای CSS آشنا شوید.

 

منبع: https://varvy.com/mobile/media-queries.html


برچسب‌ها:

Media Queryاستایل cssتعریف مدیاکوئریریسپانسیوطراحی ریسپانسیوطراحی سایتطراحی واکنش گرامدیا کوئریمدیا کوئری CSS

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

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

14 − دو =