آموزش foundation-حالت medium
مثال های شبکه بندی در فریم ورک foundation در حالت medium
در مقاله ی قبلی، ما مثالی را از شبکه بندی، برای دستگاه های small ارائه دادیم. درواقع ما از دو عنصر div (بعنوان ستون) استفاده کردیم و نسبت 25%/75% را به آنها اختصاص دادیم:
<div class="small-9 columns">....</div>
اما در دستگاه هابا اندازه ی medium، کار با نسبت 50%/50% برای طراحی مناسب تر است.
نکته: دستگاه های medium به دسته ای از دستگاه ها اطلاق می شود که دارای اندازه ی صفحه نمایش از 40.0625em تا 64.0624em هستند.
برای دستگاه های medium، ما از کلاس های *-medium. استفاده می کنیم.
اکنون ما عرض ستون ها را برای دستگاه های medium اضافه می کنیم:
<div class="small-9 medium-6 columns">....</div>
توضیح مثال
همان طور که مشاهده می کنید، ما برای دستگاه های small از نسبت 25%/75% استفاده کرده ایم(کلاس های small-3. و small-9. ).اما برای دستگاه های medium ما از نسبت 50%/50% استفاده می کنیم(کلاس های medium-6. و medium-6.). برای دیدن تاثیر، مرورگر خود را تغییر اندازه دهید:
مثال
<div class="small-3 medium-6 columns" style="background-color:yellow;">
<p>Lorem ipsum..</p>
</div>
<div class="small-9 medium-6 columns" style="background-color:pink;">
<p>Lorem ipsum..</p>
</div>
</div>
نتیجه:
 |
نکته: توجه کنید که جمع اعداد کلاس های یک حالت، باید برابر با 12 باشد. |
|---|
تنها استفاده از حالت medium
در مثال زیر، ما تنها از کلاس medium-6. استفاده می کنیم ( بدون کلاس های *-small.). این بدین معنی است که در دستگاه های medium و large از نسبت 50%/50% استفاده شده است(به دلیل پیمایش). اما در دستگاه های small عمل انباشته شدن به صورت افقی انجام می شود( عرض 100%):
مثال
<div class="medium-6 columns" style="background-color:yellow;">
<p>Lorem ipsum..</p>
</div>
<div class="medium-6 columns" style="background-color:pink;">
<p>Lorem ipsum..</p>
</div>
</div>
نتیجه:
در مقاله ی بعدی نحوه ی اضافه کردن یک نسبت متفاوت برای دستگاه های بزرگ آموزش داده خواهد شد.
- نوشته شده توسط احسان عباسی
- بازدید: 3350
