دوره مجازی فاندیشن (جلسه 3) - معرفی و بررسی سیستم شبکه بندی-قسمت اول

- visibility ۶ mode_comment

در جلسه سوم این دوره آموزش فریم ورک فاندیشن و بخش اول آن این دوره می پرداریم به معرفی و بررسی سیستم شبکه بندی در فریم ورک فاندیشن

در این جلسه می پردازیم به :

  • نحوه نصب و استفاده  از ابزار grid displayer برای نمایش سیستم شبکه بندی فاندیشن
  • توضیح مفهوم سیستم شبکه بندی و بررسی آن تحت فریم ورک فاندیشن
  • مفهوم media query ها در css و کاربرد آن در طراحی واکنشگرا
  • بررسی کامل media query های فریم ورک فاندیشن همرا با توضیح و مثال
  • بررسی مقدمات ایجاد سیستم شبکه بندی و معرفی کلاس های آن
  • بررسی کلاس row
  • بررسی کلاس column و columns و تفاوت آنها
  • بررسی کلاس small
  • بررسی کلاس medium
  • بررسی کلاس large
  • ذکر مثال های ساده برای درک بهتر نحوه کارکرد و کاربرد کلاس های فوق
info توجه

این مطلب یک جلسه از دوره آموزش فاندیشن می باشد و برای مشاهده آن باید در دوره ثبت نام کنید.

ثبت نام در دوره آموزش فاندیشن

comment دیدگاه کاربران
فرهاد

با سلام جناب صالحی
در بعضی قسمت های این ویدئو صدا و تصویر همخوانی ندارد. برای مثال دقیقه 54:30 را ملاحظه کنید.

وحید صالحی

معلومه که با دقت مباحث رو دنبال می کنید 🙂 خیلی خوبه و ممنون از اطلاع رسانی تون مشکل از خروجی کمتازیا بوده که دوباره خروجی می گیریم و در اختیارتون قرار می دیم

فرهاد

بللله استاد اونم با چه دقتی و اونقدر از شیوه تدریس شما لذت می بردم که سر ساعت 5 برای دانلود کردن ویدئو میام مرسیییی استاد

وحید صالحی

شما لطف داری خوشحالیم که مورد توجهتون قرار گرفته…

فرهاد

استاد صالحی یه سوال
در جلسه قبل در صفحه دانلود فاندیشن دیدیم که عرض گاتر ها بر حسب یه عدد ثابت که 1.875 بود تعیین شده و برای ستون ها ماکزیمم عرض تعیین شده اما توی این جلسه وقتی شما سایز صفحه وب رو کوچیک و بزرگ می کردین دیدم که عرض گاتر ها هم کوچیک و بزرگ میشه. در حالی که در صفحه دانلود فاندیشن عرض گاتررو به صورت ثابت تعیین کرده بود. سوالم اینجاست که با کوچیک شدن عرض صفحه وب عرض گاتر ها کم و زیاد میشه یا عرض ستون ها یا هر دو و به چه دلیل؟ ممنون از پاسخگویی

وحید صالحی

ذر جلسه سوم اگر دقت کرده باشید در مورد مدیا کوئری ها صحبت کردیم در حقیقت gutter ها مقدار padding ی هست که برای کلاس column در هر ستون از چپ و راست براش در نظر گرفته میشه که در بالاترین کلاس که large هست و بالاترین مدیا کوئری که 1200px هست در چپ و راست هر هر ستون 15 پیکسل براش در نطر گرفته شده یا خودمون در حالت دانلود سفارشی هست براش هر مقداری رو می تونیم در نظر بگیریم که بصورت استاندارد بدون تغییر در هسته سفارشی مجموع چپ و راست میشه 30px یا همون 1.875rem حالا هر چه عرض کمتر بشه مدیا کوئری های با عرض کمتر اجرا میشن مثلا در حالت کلاس medium در مدیا کوئری مختص خودش که توضیح دادیم padding هر ستون کمتر میشه مثلا میشه 9px لذا gutter ها کوچکتر میشه این اتقاق دقیقا برای عرض ستون ها هم در مدیا کوئری های کوچکتر با عرض کمتر صقحه نمایش می افته… در جلسه بعد همین موارد رو که عرض کردم درون هسته فاندیشن توضیح خواهم داد تا رفتار شون رو بهتر درک کنید در کل همون طور که در این جلسه اشاره شد طراحی رسپانسو یعنی تغییر وضعیت و حالت عناصر در اندازه های مختلف صفحه نمایش به همراه تغییر یکسری از پراپرتی هاشون توسط مدیا کوئری ها …

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.