السّلام علیک یا اباعبداللّه الحسین

سبد (0)

تبلیغات

آموزش 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-small-only">I am shown only on a small screen.</p>
<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-small-only">You are <em>not</em> on a small screen.</p>
<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>

نتیجه

You are not on a small screen.

You are not on a medium screen.

You are not on an xlarge screen and up.

You are not on an xlarge screen.

You are not on an xxlarge screen.

خودتان امتحان کنید »

نمایش عناصر به وسیله ی جهت(orientation)

شما می توانید مشخص کنید که آیا یک عنصر باید در جهت های مختلف صفحه، نمایش یابد یا محو شود. لپ تاپ ها و رایانه های رومیزی همیشه به صورت افقی هستند در حالی که موبایل ها و تبلت ها ممکن است به صورت افقی یا عمودی باشند. یا به عبارت دیگر در موبایل ها و تبلت ها می توانید جهت را تغییر دهید. 

کلاستوضیحات
show-for-landscape.

در حالت افقی، عنصر را نمایش می دهد( و در حالت عمودی عنصر را محو می کند)

show-for-portrait.

در حالت عمودی، عنصر را نمایش می دهد( و در حالت افقی عنصر را محو می کند)

متن زیر جهتی که شما در حال استفاده از آن هستید را شرح می دهد: 

مثال

<p class="show-for-landscape">This text is only shown in landscape orientation.</p>
<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="show-for-touch">Your device supports touch.</p>
<p class="hide-for-touch">Your device does not support touch.</p>

نتیجه:

Your device does not support touch.

خودتان امتحان کنید »
 
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی