主页 / 问题 / 1387139
Accepted
Alexandr_Yakovlev
Asked:2022-08-03 21:31:29 +0000 UTC2022-08-03 21:31:29 +0000 UTC

如何在手机上隐藏元素，但将其保留在 PC 上？

  • 772

我在页面上有一个元素，应该只在计算机上显示。

我该怎么做？这可以用 css @media 实现吗？

html

2 个回答

  1. Best Answer

    在您的情况下，您可以使用例如媒体查询并在其中指定最大屏幕宽度（以像素为单位，或者最好以相对单位为单位，例如em），您指定的元素将被属性隐藏在该宽度上display: none;或者visibility: hidden;，取决于隐藏元素时想要达到的效果。

    屏幕的大小，您将考虑已经是一台计算机，由您自己确定，但通常这是最小的1024px (или 64em)，但最好指定宽度1200px (или 75em)。

    它可能看起来像这样：

    .element {
    display: block;
}

@media(max-width: 75em) {
    .element {
        display: none;
    }
}

    您可以采用相反的方式并指定相反的内容：显示元素的最小屏幕宽度，并且在低于此宽度的所有屏幕上，它将被隐藏。例子：

    .element {
    display: none;
}

@media(min-width: 75em) {
    .element {
        display: block;
    }
}
    • 1

  2. 使用@media 规则 这是一些信息

    .resize{
  width: 720px;
  height: 620px;
  border: 2px solid #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  resize: both;
  overflow: auto;
}

.resize > div{
  width: 100%;
  text-align: center;
}

@media only screen and (max-width: 480px) {
  .pc{
    display: none;
  }
}

@media only screen and (min-width: 480px) {
  .mob{
    display: none;
  }
}
    <div class="resize">
  <div class="all">Показать всем</div>
  <div class="pc">Показать на пк</div>
  <div class="mob">Показать на телефоне</div>
</div>

    • 0

相关问题