8.40.1. Display elements according to screen size ¶
The following classes display elements based on the device (screen size).
Class | Description |
|---|---|
.show-for-small-only | Display elements only on small devices (screen width less than 40.0625em) |
.show-for-medium-up | Display elements on medium and above devices (screen width greater than 40.0625em) |
.show-for-medium-only | Display elements only on medium-sized devices (screen width between 40.0625em and 64.0625em) |
.show-for-large-up | Display elements on large and above devices (screen width is larger than 64.0625em) |
.show-for-large-only | Display elements only on large devices (screen width between 64.0625em and 90.0625em) |
.show-for-xlarge-up | Display elements on larger devices and above (screen width is larger than 90.0625em) |
.show-for-xlarge-only | Display elements only on larger devices and above (screen width between 90.0625em and 120.0625em) |
.show-for-xxlarge-up | Display elements on very large and above devices (screen width is larger than 120.0625em) |
The following examples demonstrate all of the above
.show-
Visibility of the class.
<p class="show-for-small-only">你在小型设备上。</p>
<p class="show-for-medium-up">你在中型、大型、更大型、超大型的设备上。</p>
<p class="show-for-medium-only">你在中型设备上。</p>
<p class="show-for-large-up">你在大型、更大型、超大型的设备上</p>
<p class="show-for-large-only">你在大型设备上。</p>
<p class="show-for-xlarge-up">你在更大型、超大型的设备上。</p>
<p class="show-for-xlarge-only">你在更大型设备上。</p>
<p class="show-for-xxlarge-up">你在超大型设备上。</p>
8.40.2. Hide elements according to screen size ¶
The following classes hide elements based on the device (screen size).
Class | Description |
|---|---|
.hide-for-small-only | Hide elements only on small devices (screen width less than 40.0625em) |
.hide-for-medium-up | Hide elements on medium and above devices (screen width is larger than 40.0625em) |
.hide-for-medium-only | Hide elements only on medium-sized devices (screen width between 40.0625em and 64.0625em) |
.hide-for-large-up | Hide elements on large and above devices (screen width is larger than 64.0625em) |
.hide-for-large-only | Hide elements only on large devices (screen width between 64.0625em and 90.0625em) |
.hide-for-xlarge-up | Hide elements on larger devices and above (screen width is larger than 90.0625em) |
.hide-for-xlarge-only | Hide elements only on larger devices and above (screen width between 90.0625em and 120.0625em) |
.hide-for-xxlarge-up | Hide elements on very large and above devices (screen width is larger than 120.0625em) |
<p class="hide-for-small-only">你不在小型设备上。</p>
<p class="hide-for-medium-up">你不在中型、大型、更大型、超大型的设备上。</p>
<p class="hide-for-medium-only">你不在中型设备上。</p>
<p class="hide-for-large-up">你不在大型、更大型、超大型的设备上。</p>
<p class="hide-for-large-only">你不在大型设备上。</p>
<p class="hide-for-xlarge-up">你不在更大型、超大型的设备上。</p>
<p class="hide-for-xlarge-only">你不在更大型设备上。</p>
<p class="hide-for-xxlarge-up">你不在超大型设备上。</p>
8.40.3. Display elements according to screen orientation ¶
The following classes hide elements based on the device (screen size).
We can set whether the element is shown or hidden in different directions. Desktop devices such as laptops are generally horizontal, but mobile phones and tablet devices can be horizontal or vertical. We can set elements to hide and display according to the direction in which the user’s phone is held:
Class | Description |
|---|---|
.show-for-landscape | Show elements at landscape orientation (hidden vertically) |
.show-for-portrait | Show elements in portrait (horizontal hidden) |
The following example displays text content based on the direction in which it is used:Example ¶
<p class="show-for-landscape">文本只在横向显示。</p>
<p class="show-for-portrait">文本只在纵向显示。</p>
8.40.4. Display and concealment of touch screen devices ¶
You can show and hide elements depending on whether the device supports touch or not.
Class | Description |
|---|---|
.show-for-touch | Display on touchscreen-enabled devices (hidden on unsupported devices) |
.hide-for-touch | Hide on devices that support touchscreens (display on unsupported devices) |
The following example displays text content depending on whether the device supports touch:Example ¶
<p class="show-for-touch">你的设备支持触屏。</p>
<p class="hide-for-touch">你的设备不支持触屏。</p>