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

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

رایگان

شما در این دوره ثبت نام نکردید

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

امروزه وب سایت ها به وسیله انواع دستگاه ها مثل دسکتاپ ها با مانیتورهای بزرگ، لپ تاپ ها با مانیتورهای متوسط، تبلت ها، اسمارت فون ها و غیره مشاهده می شوند. برای رسیدن به یک تجربه کاربری مطلوب، سایت ها باید طوری طراحی شوند که بتوانند در انواع دستگاه ها درست نمایش داده شوند. به فرایند سازگار کردن وب سایت ها با انواع صفحات نمایش در دستگاه های مختلف طراحی وب واکنشگرا (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 آشنا می شوید. در انتهای دوره می توانید ریسپانسیو کردن سایت ها را آغاز کنید.

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

  1. آشنایی با مفاهیم اولیه و متا تگ viewport
  2. شبکه بندی
  3. مدیا کوئری
  4. پروژه طراحی سایت واکنشگرا
  5. واکنشگرا کردن تصاویر
جلسات دوره
بخش اول

آشنایی با مفاهیم اولیه و viewport متا تگ

00:05:35
ثبت نام کنید

شبکه بندی

00:27:54
ثبت نام کنید

مدیا کوئری

00:20:50
ثبت نام کنید

پروژه طراحی سایت واکنش گرا

00:24:17
ثبت نام کنید

واکنشگرا کردن تصاویر

00:16:45
ثبت نام کنید
نظرات شما

نقد و بررسی‌ها

هنوز بررسی‌ای ثبت نشده است.

اولین کسی باشید که دیدگاهی می نویسد “آموزش واکنش گرایی با مدیا کوئری”