在桌面视口上使用移动导航断点 w/o 编辑断点

Question

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

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

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

Answer 1

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

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

更新

我想到的是：

创建一个 _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>

在桌面视口上使用移动导航断点 w/o 编辑断点

Using mobile navigation breakpoint on desktop viewport w/o editing breakpoints

javascript

sass

navbar

responsive-design