Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How CSS hides or displays elements based on screen size

2025-01-19 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/01 Report--

This article introduces in detail "CSS how to hide or display elements according to screen size," the content is detailed, the steps are clear, and the details are properly handled. I hope this article "CSS how to hide or display elements according to screen size" can help you solve your doubts. Let's go deeper and learn new knowledge together with the ideas of Xiaobian.

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 larger devices (Screen width greater than 40.0625em).show-for-medium-only Show elements only on medium-sized devices (Screen widths between 40.0625em and 64.0625em).show-for-large-up Display elements on large and larger devices (Screen width greater than 64.0625em).show-for-large-only Show elements only on large devices (Screen widths between 64.0625em and 90.0625em).show-for-xlarge-up Display elements on larger and larger devices (screen width greater than 90.0625em).show-for-xlarge-only Display elements only on larger devices (screen width between 90.0625em and 120.0625em).show-for-xxlarge-up Display elements on very large devices (screen width greater than 120.0625em)

The following example demonstrates the visibility of all of the above. show-classes.

You're on a small device.

Hide elements according to screen size

The following classes hide elements based on device (screen size).

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 older devices (Screen width greater than 40.0625em).hide-for-medium-only Hide elements only on medium-sized devices (Screen widths between 40.0625em and 64.0625em).hide-for-large-up Hide elements on large and larger devices (Screen width greater than 64.0625em).hide-for-large-only Hide elements only on large devices (Screen widths between 64.0625em and 90.0625em).hide-for-xlarge-up Hide elements on larger and larger devices (Screen width greater than 90.0625em).hide-for-xlarge-only Hide elements only on larger devices (screen width between 90.0625em and 120.0625em).hide-for-xxlarge-up Hide elements on very large devices (screen width greater than 120.0625em) You are not on small devices.

Display elements according to screen orientation

The following classes hide elements based on device (screen size).

We can set whether elements are shown or hidden in different orientations. Desktop devices such as notebooks are generally horizontal, but mobile phones and tablet devices can be horizontal or vertical. We can set the hidden and displayed elements according to the orientation of the user's mobile phone:

Class Description.show-for-landscape Show elements in landscape (hidden in portrait).show-for-portrait Show elements in portrait (hidden in landscape)

The following example displays text content according to the direction of use:

examples

Text is displayed only horizontally.

Text is displayed only vertically.

Display and hiding of touch screen devices

You can show and hide elements depending on whether the device supports touch.

class description.show-for-touch Show on touch-enabled devices (hide on unsupported devices).hide-for-touch Hide on touch-enabled devices (Show on unsupported devices)

The following example displays text content based on whether the device supports touch:

examples

Your device supports touch screens.

Your device does not support touch screens.

Read here, this article "CSS how to hide or display elements according to screen size" article has been introduced, want to master the knowledge points of this article still need to be used by ourselves to understand, if you want to know more related content articles, welcome to pay attention to industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report