有没有一种方法可以只在移动设备上为某个类分配类

Question

我刚刚完成了一个菜单的样式设置，但我希望它全部合并到移动设备上的移动风格菜单中。网站就在这里。

这是菜单的HTML：

          <div class="masthead clearfix">
            <div class="inner">
              <h3 class="masthead-brand">ONLY AT LSA</h3>
              <nav>
                <ul class="nav masthead-nav">
                  <li class="active"><a href="#">The Experience</a></li>
                  <li><a href="#">Recent News</a></li>
                  <li><a href="#">Gallery</a></li>
                </ul>
              </nav>
            </div>
          </div>

这是菜单的CSS：

.masthead-brand {
  margin-top: 10px;
  margin-bottom: 10px;
}
.masthead-nav > li {
  display: inline-block;
}
.masthead-nav > li + li {
  margin-left: 20px;
}
.masthead-nav > li > a {
  padding-right: 0;
  padding-left: 0;
  font-size: 16px;
  font-weight: bold;
  color: #fff; /* IE8 proofing */
  color: rgba(255,255,255,.75);
  border-bottom: 2px solid transparent;
}
.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
  background-color: transparent;
  border-bottom-color: #a9a9a9;
  border-bottom-color: rgba(255,255,255,.25);
}
.masthead-nav > .active > a,
.masthead-nav > .active > a:hover,
.masthead-nav > .active > a:focus {
  color: #fff;
  border-bottom-color: #fff;
}

所以我想让它从这个变成你理想的移动导航系统，你点击这个图标，它就会扩展菜单。

Answer 1

您应该使用CSS

/* All Mobile Sizes */
@media only screen and (max-width: 767px) { ... }