آموزش foundation-میدان دید
نمایش عناصر بر اساس اندازه ی صفحه ی نمایش
کلاس های نمایش زیر، یک عنصر را بر اساس اندازه ی صفحه ی نمایش ی کاربر، نمایش می دهند.
| کلاس | توضیحات |
|---|---|
| show-for-small-only. |
عنصر مورد نظر را تنها برای دستگاه های کوچک نمایش می دهد.( عرض کمتر از 40.0625em) |
| show-for-medium-up. |
عنصر مورد نظر را برای صفحه های نمایش متوسط و بیشتر، نمایش می دهد( صفحه های نمایش پهن تر از 40.0625em ) |
| show-for-medium-only. |
عنصر مورد نظر را تنها برای صفحه های نمایش متوسط نمایش می دهد( صفحه های نمایش بین 40.0625emو 64.0625em) |
| show-for-large-up. |
عنصر مورد نظر را برای صفحه های نمایش بزرگ و بالاتر، نمایش می دهد( صفحه های نمایش پهن تر از 64.0625em) |
| show-for-large-only. |
عنصر مورد نظر را تنها برای صفحه های نمایش بزرگ، نماش می دهد( صفحه های نمایش بین 64.0625em و 90.0625em) |
| show-for-xlarge-up. |
عنصر مورد نظر را برای صفحه های نمایش xlarge و بالاتر نمایش می دهد( صفحه های نمایش پهن تر از 90.0625em) |
| show-for-xlarge-only. |
عنصر مورد نظر را تنها برای صفحه های نمایش xlarge نمایش می دهد( صفحه های نمایش بین 90.0625em و 120.0625em) |
| show-for-xxlarge-up. |
عنصر مورد نظر را برای صفحه های نمایش xxlarge و بالا تر نمایش می دهد( صفحه های نمایش پهن تر از 120.0625em) |
مثالی از تمام کلاس های show. . مررگر را تغییر اندازه دهید تا نتیجه را مشاهده کنید:
مثال
<p class="show-for-medium-up">I am shown on medium screens and up.</p>
<p class="show-for-medium-only">I am shown only on a medium screen.</p>
<p class="show-for-large-up">I am shown on large screens and up.</p>
<p class="show-for-large-only">I am shown only on a large screen.</p>
<p class="show-for-xlarge-up">I am shown on xlarge screens and up.</p>
<p class="show-for-xlarge-only">I am shown only on an xlarge screen.</p>
<p class="show-for-xxlarge-up">I am shown on xxlarge screens and up.</p>
نتیجه
I am shown on medium screens and up.
I am shown on large screens and up.
I am shown only on a large screen.
محو کردن عناصر بر اساس اندازه ی صفحه ی نمایش
کلاس های محو کردن زیر، یک عنصر را بر اساس اندازه ی صفحه ی نمایش کاربر محو می کنند:
| کلاس | توضیحات |
|---|---|
| hide-for-small-only. |
عنصر مورد نظر را تنها برای صفحه های نمایش کوچک محو می کند( صفحه های نمایش کمتر از 40.0625em) |
| hide-for-medium-up. |
عنصر مورد نظر را برای صفحه های نمایش متوسط و بالاتر محو می کند( صفحه های نمایش عریض تر از 40.0625em) |
| hide-for-medium-only. |
عنصر مورد نظر را تنها برای صفحه های نمایش متوسط محو می کند( صفحه های نمایش بین 40.0625em و 64.0625em) |
| hide-for-large-up. |
عنصر مورد نظر را برای صفحه های نمایش بزرگ و بالاتر محو می کند( صفحه های نمایش پهن تر از 64.0625em) |
| hide-for-large-only. |
عنصر مورد نظر را تنها برای صفحه های نمایش بزرگ محو می کند( صفحه های نمایش بین 90.0625em و 64.0625em) |
| hide-for-xlarge-up. |
عنصر مورد نظر را برای صفحه های نمایش xlarge و بالاتر محو می کند( صفحه های نمایش پهن تر از 90.0625em) |
| hide-for-xlarge-only. |
عنصر مورد نظر را تنها برای صفحه های نمایش xlarge محو می کند( صفحه های نمایش بین 90.0625em و 120.0625em) |
| hide-for-xxlarge-up. |
عنصر مورد نظر را برای صفحه های نمایش xxlarge و بالاتر نمایش می دهد( صفحه های نمایش پهن تر از 120.0625em) |
مثالی از تمام کلاس های -hide. . متن زیر صفحه های نمایشی که شما از آن استفاده نمی کنید را شرح می دهد. برای دیدن نتیجه، صفحه ی مرورگر خود را تغییر اندازه دهید:
مثال
<p class="hide-for-medium-up">You are <em>not</em> on a medium, large, xlarge, or xxlarge screen.</p>
<p class="hide-for-medium-only">You are <em>not</em> on a medium screen.</p>
<p class="hide-for-large-up">You are <em>not</em> on a large, xlarge, or xxlarge screen.</p>
<p class="hide-for-large-only">You are <em>not</em> on a large screen.</p>
<p class="hide-for-xlarge-up">You are <em>not</em> on an xlarge screen and up.</p>
<p class="hide-for-xlarge-only">You are <em>not</em> on an xlarge screen.</p>
<p class="hide-for-xxlarge-up">You are <em>not</em> on an xxlarge screen.</p>
نتیجه
نمایش عناصر به وسیله ی جهت(orientation)
شما می توانید مشخص کنید که آیا یک عنصر باید در جهت های مختلف صفحه، نمایش یابد یا محو شود. لپ تاپ ها و رایانه های رومیزی همیشه به صورت افقی هستند در حالی که موبایل ها و تبلت ها ممکن است به صورت افقی یا عمودی باشند. یا به عبارت دیگر در موبایل ها و تبلت ها می توانید جهت را تغییر دهید.
| کلاس | توضیحات |
|---|---|
| show-for-landscape. |
در حالت افقی، عنصر را نمایش می دهد( و در حالت عمودی عنصر را محو می کند) |
| show-for-portrait. |
در حالت عمودی، عنصر را نمایش می دهد( و در حالت افقی عنصر را محو می کند) |
متن زیر جهتی که شما در حال استفاده از آن هستید را شرح می دهد:
مثال
<p class="show-for-portrait">This text is only shown in portrait orientation.</p>
نتیجه:
This text is only shown in landscape orientation.
Hide/Show For Touch Screensمحو کردن یا نمایش عنصر برای صفحه های لمسی
شما می توانید یک عنصر را بر اساس پشتیبانی دستگاه کاربر از حالت لمسی، نمایش دهید یا محو کنید.
| کلاس | توضیحات |
|---|---|
| show-for-touch. |
عنصر مورد نظر را برای صفحه های لمسی نمایش می دهد( و برای صفحه های غیر لمسی محو می کند) |
| hide-for-touch. |
عنصر مورد نظر را برای صفحه های لمسی محو می کند( و برای صفحه های غیر لمسی نمایش می دهد) |
متن زیر مشخص می کند که آیا شما از یک دستگاه لمسی استفاده می کنید یا نه:
مثال
<p class="hide-for-touch">Your device does not support touch.</p>
نتیجه:
- نوشته شده توسط احسان عباسی
- بازدید: 3625
