有没有办法只为移动设备上的某物分配一个类答案

【问题标题】：Is there a way to only assign a class to something if its on a mobile device有没有办法只为移动设备上的某物分配一个类
【发布时间】：2016-04-02 02:02:03
【问题描述】：

我刚刚完成了菜单的样式设置，但我希望将其全部合并到移动设备上的移动样式菜单中。该网站是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 转到您理想的移动导航系统，您可以单击该图标并展开菜单。

【问题讨论】：

如果你实现了一个好的浏览器平台检测脚本，那么你可以创建一个if-then条件来根据用户设备正确渲染内容。
我不明白你的问题，但也许你只是想要一份汉堡菜单？在this link查看演示和代码
看起来不错，但我说放弃模式上的动画（在移动设备上会滞后）。至于导航，只需在标记中已有一个单独版本的导航，其类别为.fly-out-nav 和一个类别为.menu-trigger 的图标，并且仅使用您的媒体查询在移动设备上显示它们。看这里的例子：spanishwizards.com
只需向您的class 属性添加一个额外的类。然后使用媒体查询将附加类添加到 css
媒体查询是你的朋友！

标签： css twitter-bootstrap navigation

【解决方案1】：

你应该使用 CSS

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

【讨论】：

OP应该使用CSS！为什么我没有想到！ ;)