Html 使**响应导航**支持不同的设备，如移动设备、选项卡和桌面

我有这样一个导航，我想使之成为响应式导航，支持不同的设备，如移动设备、选项卡和桌面

在我的手机侧边栏中包含menu.html文件， 我在桌面的头文件中包含了相同的hmtl文件

问题是如何使手机侧边栏的样式只保留在手机上，而只为桌面添加我的第二个样式

这是我在手机上使用的侧边栏： 然后我将禁用此选项以在桌面上显示

我将此菜单包含在桌面的标题中：

我需要的两种样式都已包含在主题的资源中

这是我现在在边栏和标题栏中使用的结构

   <ul id="menu-lg" class="menu-items text-uppercase list-inline nav-tabs-simple" role="tablist">
        <li class="sm-m-t-20 list-unstyled active" ui-sref-active="open" data-toggle="tab">
            <span class="icon-thumbnail hidden-md hidden-lg"><i class="fa fa-dashboard"></i></span>
            <a class="nav-text" ui-sref="product.dashboard" data-toggle="tab">
                <span class="titl">Dashboard</span>
            </a>
        </li>
        <li class="list-unstyled" ui-sref-active="open">
            <a class="nav-text" ui-sref="product.balance">
                <span class="title">Balance</span>
            </a>
            <span class="icon-thumbnail hidden-md hidden-lg"><i class="fa fa-dollar"></i></span>
        </li>
        <li class="list-unstyled" ui-sref-active="open">
            <a class="nav-text" ui-sref="product.users">
                <span class="title">Users</span>
            </a>
            <span class="icon-thumbnail hidden-md hidden-lg"><i class="fa fa-user"></i></span>
        </li>
    </ul>

仪表板


平衡


使用者

这是第二个菜单的结构，我需要将这些样式应用于顶部的结构：

<ul class="nav nav-tabs nav-tabs-simple" role="tablist">
    <li class="active"><a ui-sref="product.dashboard" data-toggle="tab"      role="tab" aria-expanded="false">Hello World</a>
    </li>
    <li class=""><a ui-sref="product.balance" data-toggle="tab" role="tab" aria-expanded="false">Hello Two</a>
    </li>
    <li class=""><a ui-sref="product.users" data-toggle="tab" role="tab" aria-expanded="true">Hello Three</a>
   </li>
</ul>

你好，世界

两位好

你好，三位

---

正如您所看到的，一些类已经合并，菜单运行正常，但存在一些错误，我认为必须有更好的解决方案来解决这个问题。

您所说的是使导航具有响应性

您需要使用断点在不同的设备上实现结果

这里有几个最常用的断点

@media screen and (max-width:959px){
    /*your css classes*/
}
@media screen and (max-width:640px){
    /*your css classes*/
}
@media screen and (max-width:320px){
    /*your css classes*/
}

---

您可以通过两种方式完成：

您可以在控制器中声明一个范围值，然后可以测试代理是移动还是桌面。例如，Modernizer具有测试移动设备的功能。在不同的情况下，可能会为scope变量存储不同的值

if (Modernizr.touch) {
   $scope.isMobile = true;
} else {
   $scope.isMobile = false;
}

（如果不想包含其他库，则应自行测试：）

在模板上执行此操作后，可以通过检查存储在scope变量上的值来使用

ng-class="{'isMobile': item.isMobile, 'isDesktop' : !item.isMobile}"

---

另一种方法是使用媒体查询。

您可以有两张css表，一张用于桌面，另一张用于移动设备，使用断点并根据屏幕大小为每个设备指定规则。您好，谢谢您的评论。正如我提到的，所有样式都包含在参考资料中。你的意思是我需要复制这两种设计的样式，并将它们相应地放在媒体查询中，然后在移动和桌面上禁用它们？我已经做过类似的事情，但正如我所说的，一些bug存在，比如第二个菜单的活动部分在侧栏中持续存在。这是我也想去的路径之一，但我尝试了一个css修复，因为我不想使用很多小的js函数。所有的产品都可以尝试。但无论如何，这个解决方案看起来是可靠的。我在angular方面没有太多经验，因此理解逻辑有点棘手：）我将在实现时将此问题标记为已接受：）