Question

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

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

这是否是这种情况的最佳做法？或者是否有更简单，更干燥的技术，只显示该页面的折叠移动导航栏？

Answer 1

通常我会通过在相关页面的body标签中添加一个类来处理这样的事情，然后使用该新类来定位该页面上的导航栏。

我无法描述您对扩展现有导航栏类的描述，因此不确定我的建议是否有所改进。

更新

我在想的是：

使用您的通用导航样式创建_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>

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

1 个答案: