html - .desktop {display :none;}/. mobile {display:inline;}

Question

我目前正在参加 HTML/CSS 类(class)，这本书推荐我使用.desktop {display:none;}/.mobile {display:inline;} 以及div class="desktop"{ }/div class="mobile"{ }

书上说mobile class/style只会出现在mobile上，desktop class/style只会出现在desktop上，但是mobile class/style一直出现，desktop class/style根本不出现。还有其他我可以使用的功能吗？我将 Notepad++ 用于 HTML 和 CSS，我的目标是让我的网站响应。

Answer 1

您会想要使用媒体查询来使您的网站具有响应性。下面是您要使用的 CSS 示例:

// Anything up here will be your global/mobile styles
.desktop {
  display: none;
}

// Activates when your screen width is above 768px
// anything in here will be your desktop styles
@media(min-width: 768px) {
  .desktop {
    display: inline;
  }

  .mobile {
    display: none;
  }
}

对于您的 HTML，您只需要两个元素，一个用于桌面，一个用于移动。

<div class="desktop">
  Desktop Version
</div>

<div class="mobile">
  Mobile Version
</div>