如何仅使用CSS在移动设备上显示文本? [英] How to show text only on mobile with CSS?

问题描述

我有一个文本(以div为单位)，该文本显示在台式机和移动屏幕上.

I have a text (in a div) which shows on desktop and mobile screens.

期望

我希望文本仅显示在@media only screen and (max-width: 768px)

如何

1. 使用display:none 或

还有其他解决方法吗?

推荐答案

使用媒体查询.

将display:none设置为div，然后使用最大宽度媒体查询将display:block应用于移动设备.

Set display:none to div and then apply display:block for mobile using max-width media query.

堆栈代码段

Stack Snippet

div {
  display: none;
}

@media only screen and (max-width: 768px) {
  div {
    display: block;
  }
}

<div>Text</div>

，或者您可以使用最小宽度媒体查询.这里的代码更少

or you can use the min-width media query. Less code here

堆栈代码段

Stack Snippet

@media only screen and (min-width: 768px) {
  div {
    display: none;
  }
}

<div>Text</div>

这篇关于如何仅使用CSS在移动设备上显示文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！