May 04, 2021 Foundation5
2. The elements are displayed according to the screen size
3. Hide elements based on screen size
4. The elements are displayed according to the orientation of the screen
The following classes display elements based on the device (screen size).
| Class | Describe |
|---|---|
| .show-for-small-only | Only elements are displayed on small devices (screen width is 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 | Only elements are displayed on medium devices (screen width between 40.0625em and 64.0625em) |
| .show-for-large-up | Display elements on large and above devices (screen width greater than 64.0625em) |
| .show-for-large-only | Only elements are displayed on large devices (screen width between 64.0625em and 90.0625em) |
| .show-for-xlarge-up | Display elements on larger and above devices (screen width greater than 90.0625em) |
| .show-for-xlarge-only | Only display elements on larger and above devices (screen width between 90.0625em and 120.0625em) |
| .show-for-xxlarge-up | Display elements on very large and above devices (screen width greater than 120.0625em) |
The following example demonstrates the visibility
.show-
<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>
The following classes hide elements based on the device (screen size).
| Class | Describe |
|---|---|
| .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 greater than 40.0625em) |
| .hide-for-medium-only | Hide elements only on medium devices (screen width between 40.0625em and 64.0625em) |
| .hide-for-large-up | Hide elements on large and above devices (screen width greater 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 and above devices (screen width greater 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 oversized devices (screen width greater 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>
The following classes hide elements based on the device (screen size).
We can set whether elements are displayed or hidden in different directions. Desktop devices such as notebooks are generally landscaped, but mobile phones and tablet devices can be landscape or portrait, we can set elements to hide and display according to the direction taken by the user's phone:
| Class | Describe |
|---|---|
| .show-for-landscape | Display elements when landscaped (portrait hidden) |
| .show-for-portrait | Display elements at portrait (horizontally hidden) |
The following example displays text content in the direction in which it is used:
You can display and hide elements depending on whether the device supports touch.
| Class | Describe |
|---|---|
| .show-for-touch | Show on touch-screen-supported devices (hidden on unsupported devices) |
| .hide-for-touch | Hide on touch-screen-supported devices (display on unsupported devices) |
The following example displays text content based on whether the device supports touch: