آموزش foundation-حالت large

حالت large در سیستم شبکه بندی foundation

در مقاله ی قبلی ما یک مثال از شبکه بندی ارائه دادیم که از کلاس های small و medium در آن استفاده شده بود. درواقع ما از دو div (بعنوان ستون) استفاده کردیم و برای حالت small از نسبت 75%/25% و برای حالت medium از نسبت 50%/50% استفاده کردیم:

اما در دستگاه ها به صفحه ی نمایش بزرگ، بهتر است از نسبت 66%/33% استفاده کنیم. 

نکته: دستگاه با صفحه ی نمایش بزرگ، به دستگاه های اطلاق می شود که دارای صفحه ی نمایش به اندازه ی 64.0625em و بیشتر باشند. 

برای دستگاه های large، ما از کلاس های *-large استفاده می کنیم. 

حالا ما برای دستگاه های بزرگ، عرض ستون ها را به کدهای قبلی اضافه می کنیم:

توضیح مثال

• برای دستگاه های small از نسبت 75%/25% استفاده می کنیم (کلاس های small-3. و small-9.)
• برای دستگاه های medium از نسبت 50%/50% استفاده می کنیم(کلاس های medium-6. و medium-6.)
• برای دستگاه های large از نسبت 66%/33% استفاده می کنیم(کلاس های large-4. و lerge-8.)

پنجره ی مرورگر را تغییر اندازه دهید تا تاثیر را مشاهده کنید:

مثال

	نکته: دقت داشته باشیدکه جمع اعداد کلاس های یک حالت باید برابر با 12 باشد.

تنها استفاده از حالت large

در مثال زیر ما تنها از کلاس large. استفاده کرده ایم( بدون استفاده از کلاس های *-small. یا *-medium.). این بدین معنی است که دستگاه های بزرگ، از نسبت 50%/50% استفاده می کنند اما برای دستگاه های medium و small عناصر به صورت عمودی انباشته می شوند( و عرض 100% را اشغال می کنند):