Latest web development tutorials

Foundation CSS visibility

According to the screen size of display elements

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>

try it"

According to the screen size hidden element

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>

try it"

Display elements according to the screen orientation

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:

Examples

<P class = "show-for -landscape"> text only appears in the transverse direction. </ P>
<P class = "show-for -portrait"> Text only in portrait. </ P>

try it"

Touch-screen display device and hide

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:

Examples

<P class = "show-for -touch"> Your device supports touch screen. </ P>
<P class = "hide-for -touch"> Your device does not support touch screen. </ P>
try it"