css - 有没有办法只在移动设备上为某物分配一个类

Question

我刚刚完成了菜单样式设计，但我希望它全部合并到移动设备上的移动样式菜单中。网址是here .

这是菜单的 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;
}

所以我希望它从 this 开始到您理想的移动导航系统，点击图标即可展开菜单。

Answer 1

你应该使用 CSS

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