5.00 از 1 رأی

رایگان!

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

  • 5 جلسه
  • مدت زمان: 01:35:21 ساعت
  • پیش نیازها: تسلط به html و css
مدرس مونا کیارستمی

مونا کیارستمی

درباره مدرس کارشناسی ارشد هوش مصنوعی دارم. چند سال در زمینه طراحی وب و برنامه نویسی کار کردم. عاشق یادگیری مطالب جدیدم.

مشاهده بیشتر

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

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

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

آموزش مدیا کوئری

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

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

برای اعمال یک سری استایل ها روی ویژگی های مرورگر مثل عرض، ارتفاع و وضوح صفحه از مدیا کوئری استفاده می کنیم. برای آشنایی بیشتر با آموزش مدیا کوئری به ساختار زیر توجه کنید:  
@media media-type (media-feature){
/*Styles go here*/
}

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

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

برای اینکه آموزش ریسپانسیو برای شما ملموس تر شود به مثال ها توجه کنید. تو این مثال می خوایم وقتی عرض دستگاه 600 پیکسل یا کمتره رنگ بک گراند قرمز باشه.  
@media (max-width: 600px) {
body {
background-color: red;
}
}
با این دستور رنگ پس زمینه بدنه در عرض 600 پیکسل یا کمتر تبدیل به قرمز می شود.

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

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

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

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

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

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

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

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

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

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

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

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

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

عنوان فصل

5 جلسه
آشنایی با مفاهیم اولیه و viewport متا تگ
00:05:35 ویدئو
شبکه بندی
00:27:54 ویدئو
مدیا کوئری
00:20:50 ویدئو
پروژه طراحی سایت واکنش گرا
00:24:17 ویدئو
واکنشگرا کردن تصاویر
00:16:45 ویدئو
اشتراک گذاری:

نظرات

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

دیدگاه خود را بنویسید
  1. monatest

    مونیکا شورانگیز

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

    • mona!kia$adm

      مونا کیارستمی

      خوشحالم که مفید بوده