مدیاکوئری ها در css و ریسپانسیو کردن سایت با css3 | طراحی سایت زنجان

ریسپانسیو در css3 با استفاده از media

ریسپانسیو در css3 با استفاده از mediaReviewed by مهدی موسی زاده on Mar 3Rating: 4.0مدیاکوئری ها در css و ریسپانسیو کردن سایت با css3 | طراحی سایت زنجانآموزش (ریسپانسیو در css3)،قصد معرفی دستور media در css را داریم ، تعریف ریسپانسیو و 9 دستگاه مختلفی که میشود با دستور مدیا آنها را کنترل کرد.

ریسپانسیو در css3

در این آموزش (ریسپانسیو در css3) از طراحان سایت زنجان قصد معرفی دستور media در css را داریم و نحوه آن در ریسپانسیو کردن صفحه و اینکه ریسپانسیو به چه معناست و دستگاه های مختلفی که قادر هستیم نمایش در آنها را کنترل کنیم که 9 دسته هستند که به شرح هریک پرداخته ایم.

ریسپانسیو چیست ؟

مدیاکوئری ها در css و ریسپانسیو کردن سایت با css3 | طراحی سایت زنجان

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

بیشتر بخوانید »»» 3 ادیتور مناسب برای برنامه نویسی

به طور مثال اگر اندازه مرورگرتان را کوچک کنید ، زنجان سایت ، تغییر خواهد کرد و اسکرول افقی نخواهد خورد ، منو ها تبدیل به منوی همبرگری میشود که مناسب برای دیوایس ها با صفحه نمایش کوچک است.

مطالب اضافی برای صفحه موبایل دلیلی ندارد که نمایش داده شود و قسمت های اضافی سایت برای موبایل نباید نمایش داده شوند.

مدیاکوئری ها در css

مدیاکوئری ها در css و ریسپانسیو کردن سایت با css3 | طراحی سایت زنجان
در این باره میتونید رو عکس کلیک کنید و مطالب رو با جزییات بیشتری مطالعه بفرمایید

در Css دستوری داریم تحت عنوان media که باعث میشود یک بخش دستورات css فقط روی یک دیوایس خاص عمل کند.

خب انواع دیوایس هایی که این دستور پشتیبانی میکند به شرح زیر هستند :

  1. braile : برای دستگاه هایی هست که خروجی برای نابینایان نشان داده خواهد شد .
  2. embossed : مانند مورد قبل است با این تفاوت که این دیوایس ها قابلیت چاپ نیز دارند.
  3. handheld : هر دستگاهی که بتوانیم اون رو دردست بگیریم مثل موبایل ، تبلت و..
  4. print : دستگاه هایی که قابلیت چاپ داشته باشند.
  5. projection : برای دستگاه هایی که برای ارائه مطالب استفاده میشوند مانند پروژکتور
  6. screen : هر دستگاهی که صفحه نمایش داشته باشد.
  7. speech : دستگاه هایی که خروجی آنها صدا است و متن را به صوت تبدیل میکنند.
  8. tty : هر دستگاهی که به صورت متنی عمل میکند و این دستگاه ها پیکسل ندارند و قادر به نمایش تصویر نیستند. مثل دورنگارها
  9. tv : برای دستگاه هی تلویزیون است.

نحوه پیاده سازی

به دو روش میشود از دستورات media بهره گرفت :

  1. در روش اول شرط و مدیایی که میخواهیم رو در خوده فایل html تعریف میکنیم و اگر شرط برقرار باشد استایل مورد نظر اعمال خواهد شد برای صفحه .
  2. در روش دوم ما در خوده فایل css و مربوط به استایل هایمان دیوایس مورد نظر را مشخص خواهیم کرد و دستورات مربوط به آن را در آن  خواهیم نوشت.

روش اول :

برای تعریف مدیاکوئری بایستی از تگ link در head استفاده کنیم مانند مثال زیر :

<link rel="stylesheet" media="screen and (max-width:800px)" href="css/style.css" />

فایل Css زمانی اعمال میشود که شرطی که نوشتیم درست باشد.

 

روش دوم :

در این روش نیز به صورت زیر عمل خواهیم کرد و استایل های مورد نظر برای هر دیوایس رو در شرط مربوط به هم مدیا وارد میکنیم ، لازم به ذکر است که دیگر قسمت بالا را در صفحه html انجام نخواهیم داد و فقط ادرس فایل css را در خواهیم داد و در فایل css به صورت زیر عمل میکنیم :

@media screen and (max-width:800px)
{
     body 
     {
         background:yellow;
     }
}

@media print
{
     body
     {
          background:white;
          color:black;
     }
}

به صورت ساده مدیاکوئری ها را در css و ریسپانسیو را تعریف کردیم ، در آموزش های بعدی به شرح کامل و نحوه استفاده از مدیاکوئری ها و جزییات آنها خواهیم پرداخت .

آموزش گام گام ریسپانسیو کردن سایت با Css


در صورت تمایل به شرکت در دوره های آموزشی و مشاهده سرفصل های دوره که به صورت تضمینی برای وارد شدن به بازار کار آماده شده اند و مشاهده سر فصل ها و دوره ها میتونید به این آدرس مراجعه کنید .

شماره تماس ها برای مشاوره رایگان و پشتیبانی :

☎ تلفن های تماس : 35595289-041

☎ تلفن پشتیبانی : 09146674080


منبع : طراحان وب زنجان | zanjansite

 

مقالات دیگر :

نوشتن نظر

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