在桌面视口上使用移动导航断点，无需编辑断点答案

【问题标题】：Using mobile navigation breakpoint on desktop viewport w/o editing breakpoints在桌面视口上使用移动导航断点，无需编辑断点
【发布时间】：2016-12-24 19:50:23
【问题描述】：

我有一个响应式站点，在 SCSS 中设置了常用断点作为 mixins。我想在桌面视口上强制移动断点（折叠的导航）仅用于整个站点的一个页面。

我的第一直觉是将现有的导航栏类扩展为强制移动类，我将附加到该页面上现有的导航栏类并为强制类包含不同的断点混合，以便所有屏幕尺寸 >= 1024px显示折叠的移动菜单。

对于这种情况，这是最佳做法吗？或者是否有一种更简单、更 DRY 的技术可以仅显示该页面的折叠移动导航栏？

【问题讨论】：

标签： javascript responsive-design sass navbar

【解决方案1】：

通常我会通过向相关页面的正文标记添加一个类来处理类似的事情，然后使用该新类来定位该页面上的导航栏。

我无法想象您所描述的关于扩展现有导航栏类的内容，因此不确定我的建议是否是一种改进。

更新

我想到的是：

使用常用导航样式创建 _nav.scss 部分文件

// _nav.scss

    // SCSS partial with common nav styling

然后将此部分导入您的基本 SCSS 文件，并根据需要进行媒体查询

    // default nav on most pages, adjust breakpoint as req'd
    @media screen and (max-width: 800px) {
        .current-nav{
            @import 'nav';  
        }
    }


    // nav on .forced-mobile page only
    @media screen and (min-width: 1025px) {
        .forced-mobile .current-nav{
            @import 'nav';  
        }

   }

HTML 结构

<body>
 <!-- default for most pages -->
    ...
    <div.current-nav>
        ... 
    </div>

</body>


<body class="forced-mobile">
 <!-- forced-mobile page -->
    ...
    <div.current-nav>
        ... 
    </div>

</body>

【讨论】：

新的body类是否只需要一个新的断点，然后声明导航栏的所有移动断点属性？我的导航栏扩展想法类似于，当前导航栏类是扩展对象，而我的新强制移动导航类仅使用当前移动属性，但仅适用于桌面尺寸及以上尺寸。然后我会在当前之后应用强制移动导航类，所以像
嘿@H.E.Pennypacker，请看我上面的更新。我无法想象我的建议是否对您的方法有所改进。干杯！
这比我的攻击计划要顺利得多，而且编辑要少得多。谢谢，大卫！
太好了，我很高兴这对您有帮助@H.E.Pennypacker