آموزش واکنش گرایی با مدیا کوئری

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

رایگان

واکنش گرایی چیست؟

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

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

مدیا کوئری چیست

برای اعمال یک سری استایل ها روی ویژگی های مرورگر مثل عرض، ارتفاع و وضوح صفحه از مدیا کوئری استفاده می کنیم. برای آشنایی بیشتر با آموزش مدیا کوئری به ساختار زیر توجه کنید:

				
					@media media-type (media-feature){
/*Styles go here*/
}

انواع مدیا کوئری

همه - روی همه دستگاه ها کار می کند
چاپ - برای دستگاه هایی که رسانه در حالت پیش نمایش چاپ است استفاده می شود.
صفحه نمایش - برای دستگاه های دارای صفحه نمایش کار می کند
گفتار - در دستگاه‌هایی مانند صفحه‌خوان‌ها که در آن محتوا با صدای بلند برای کاربر خوانده می‌شود کار می کند.

مثال های مدیا کوئری

برای اینکه آموزش ریسپانسیو برای شما ملموس تر شود به مثال ها توجه کنید. تو این مثال می خوایم وقتی عرض دستگاه 600 پیکسل یا کمتره رنگ بک گراند قرمز باشه.

				
					@media (max-width: 600px) {
body {
background-color: red;
 }
}

آیا برای هر دستگاه باید مدیا کوئری جداگانه بنویسیم

به هیچ وجه! انواع موبایل ها و تبلت های متفاوت در بازار وجود دارد که نمی شود برای تک تک آنها مدیا کوئری نوشت. از آن گذشته تکنولوژی مدام در حال پیشرفت است و هر روزه دستگاه های جدید به بازار ارائه می شود. حال باید چه کرد! موبایل ها و تبلت ها دارای نقاط شکست مشخصی هستند. نقاط شکست نقاطی هستند که عرض دستگاه های مختلف از آنجا شروع می شوند.

320px — 480px : دستگاه های موبایل
481px — 768px : تبلت ها و iPad ها
769px — 1024px : لپ تاپ ها و صفحه نمایش های کوچک
1025px — 1200px: دسکتاپ ها و صفحه نمایش های بزرگ
1201px و بیشتر: تلویزیون ها و صفحه نمایش های خیلی بزرگ

دوره آموزش واکنش گرایی با مدیا کوئری

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

پشنیازهای این آموزش:

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

پاسخ به سوالات شما‌:

مدیا کوئری چیست؟

به وسیله مدیا کوئری می توانید صفحات وب را واکنشگرا کنید. برای اینکه طرح های محتلفی را با توجه به اندازه viewport ایجاد می کنیم از مدیاکوئری استفاده می کنیدم..

مدیاکوئری با چه زبانی نوشته می شود؟

برای نوشتن مدیا کوئری ها از زبان css استفاده می کنیم.

در دوره آموزش واکنش گرایی با مدیا کوئری چه چیزی یاد میگیرم؟

در این دوره به طور کامل شبکه بندی را یاد می گیرید. با مفهوم viewport آشنا می شوید. در انتهای دوره می توانید ریسپانسیو کردن سایت ها را آغاز کنید.

آنچه در این دوره آموزشی فرا می گیرید:

آشنایی با مفاهیم اولیه و متا تگ viewport
شبکه بندی
مدیا کوئری
پروژه طراحی سایت واکنشگرا
واکنشگرا کردن تصاویر

بخش اول