Question

我目前正在注册一个HTML / CSS课程，该书建议我使用 .desktop {display：none;} / .mobile {display：inline;}以及 div class =＆＃34; desktop＆＃34; {} / div class =＆＃34; mobile＆＃34; {}

这本书说移动类/风格只会出现在手机上，而桌面类/风格只会出现在桌面上，但移动类/风格总会出现，桌面类/风格也不会出现在所有。还有什么我可以用来做这个功能吗？我使用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>

Answer 2

首先您可以使用ATOM或SublimeText或VS CODE作为代码的编辑器，以帮助您进行操作。

第二如果您使用.desktop样式display:none;，那么诅咒

视图将会消失！因此，如果您想对每个设备使用两个视图，那么您的代码必须

是这样的：

.desktop {
     display:inline;
}

@media only screen and (max-width: 480px) {
    .mobile {
        display:inline;
    }
    .desktop {
        display:none !important;
    }
}

.desktop {display：none;} / .mobile {display：inline;}

2 个答案: