The best Foundation CSS visibility Tutorial In 2024, In this tutorial you can learn According to the screen size of display elements,According to the screen size hidden element,Display elements according to the screen orientation,Touch-screen display device and hide,
The following classes will be based on the device (screen size) to the display element.
class | description |
---|---|
.show-for-small-only | Only display elements on a small device (screen width less than 40.0625em) |
.show-for-medium-up | Display elements on the medium and above devices (screen width greater than 40.0625em) |
.show-for-medium-only | Show only on medium-sized device element (screen width between 40.0625em to 64.0625em) |
.show-for-large-up | In large equipment and more display elements (screen width greater than 64.0625em) |
.show-for-large-only | Only displayed on large equipment element (screen width between 64.0625em to 90.0625em) |
.show-for-xlarge-up | Display elements on the larger and more equipment (screen width greater than 90.0625em) |
.show-for-xlarge-only | Only displayed on the larger and more equipment elements (screen width between 90.0625em to 120.0625em) |
.show-for-xxlarge-up | On the large equipment and more display elements (screen width greater than 120.0625em) |
The following example demonstrates all of the above .show-
visibility 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>
The following classes will be based on the device (screen size) to hide elements.
class | description |
---|---|
.hide-for-small-only | Only hide elements on a small device (screen width less than 40.0625em) |
.hide-for-medium-up | Hide elements in the medium and above devices (screen width greater than 40.0625em) |
.hide-for-medium-only | Only hide elements on a midrange device (screen width between 40.0625em to 64.0625em) |
.hide-for-large-up | Hide elements in large and more equipment (screen width greater than 64.0625em) |
.hide-for-large-only | Only hide elements on large equipment (screen width between 90.0625em to 64.0625em) |
.hide-for-xlarge-up | In the larger and more equipment hidden element (screen width greater than 90.0625em) |
.hide-for-xlarge-only | Only hidden element (screen width 90.0625em between 120.0625em) on the larger and more equipment |
.hide-for-xxlarge-up | Hidden element on the large and more equipment (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 will be based on the device (screen size) to hide elements.
We can set an element in different directions, whether to show or hide. Laptops and other desktop devices generally horizontal, but mobile phones and tablet devices can be horizontal or vertical, we can hide and display the element according to the user's mobile phone to get directions:
class | description |
---|---|
.show-for-landscape | Display elements in the transverse (longitudinal hide) |
.show-for-portrait | Display elements (lateral hidden) in portrait orientation |
The following example shows the contents of the text according to the direction of use:
You can according to whether the device supports touch to display hidden element.
class | description |
---|---|
.show-for-touch | Displayed on a touch screen device support (not supported on devices hidden) |
.hide-for-touch | In support touch devices hidden (not displayed on supported devices) |
The following examples according to whether the device supports touch to display the text: