menu

۵- گرید یا شبکه در Materialize

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

کلاس container کلاسی مناسب برای div اصلی است که در صفحه نمایش های بزرگ (بالای ۹۹۳ پیکسل) پهنایی به اندازه ۷۰ درصد، در صفحه نمایش های متوسط (بالای ۶۰۱ پیکسل) پهنایی به اندازه ۸۵ درصد و در صفحه نمایش های کوچک هم پهنایی به اندازه ۹۰ درصد دارد.

گرید بندی در متریال بر پایه ساختاری ۱۲ ستونه است. برای کار با این ستون ها، آنها را داخل یک کلاس مادر به نام row میگذاریم و سپس به آنها کلاسی با نام col و s-1 تا s-12 میدهیم (دقت کنید که اگر کلاس row را قرار ندهید کد کار نمیکند) (فعلا کاری به ریسپانسیو کردن نداریم!):

۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲

برای تعریف میزان پهنا در صفحه نمایش کوچک، از s، در صفحه نمایش متوسط از m، در صفحه نمایش بزرگ از L و در صفحه نمایش خیلی بزرگ از xl استفاده میکنیم.

دستگاه های موبایل

(کمتر از ۶۰۰ پیکسل)

دستگاه های تبلت

(بزرگ تر از ۶۰۰ پیکسل)

صفحه نمایش بزرگ

(بزرگ تر از ۹۰۰ پیکسل)

صفحه نمایش خیلی بزرگ

(بزرگ تر از ۱۲۰۰ پیکسل)

نام کلاس .s .m .l .xl
پهنای container ۹۰% ۸۵% ۷۰% ۷۰%
تعداد ستون ها ۱۲ ۱۲ ۱۲ ۱۲

برای اینکه پهنای یک المنت، در موبایل برابر با پهنای صفحه، در تبلت نیمی از صفحه و در صفحه های بزرگ یک سوم صفحه باشد، همه ی کلاس ها را به المنت می‌دهیم، به این صورت که:

برای نمونه به این کد و نتیجه آن توجه کنید:

 

این یک بلوک ریسپاسیو است
این یک بلوک ریسپاسیو است
این یک بلوک ریسپاسیو است

کلاس دیگری به نام offset وجود دارد که زیاد کاربردی نیست. نحوه کار آن نیز مشابه با کد زیر است:

این div از سمت راست به اندازه ۶ ستون فاصله دارد

 

اگر باز هم سوالی در این خصوص داشتید در قسمت نظرات مطرح کنید تا در اسرع وقت پاسخ دهیم.

رفتن به نوارابزار