Question

我的网站上有一个侧边栏，可在较小的屏幕上缩小为一个较窄的边栏。我现在想添加一个选项，以便即使在大屏幕上也能切换到较窄的边栏。假设我通过向.compact添加类<body>来做到这一点。

我的紧凑侧边栏CSS最初位于@media块中：

    @media(min-width: 768px) and (max-width: 1200px) {
        nav {}
        nav > .nav-item {}
        /* ... */
    }

现在还需要作为.compact的子代：

    body.compact nav {}
    body.compact nav > .nav-item {}
    /* ... */

由于@media的语法是包装程序之一，并且不能成为.compact的声明的同级文件，因此我需要复制/粘贴所有声明以实现该行为。

是否有另一种聪明的方法可以实现这一目标，而这不涉及javascript？

Answer 1

这可以通过使用css variables来实现：

function toggleSidebar(size) {
  let container = document.getElementById("container");
  let sibebarClass;

  switch (size) {
    case 'sm':
      sidebarClass = 'small-sidebar';
      break;
    case 'md':
      sidebarClass = 'medium-sidebar';
      break;
    case 'lg':
      sidebarClass = 'large-sidebar';
      break;
    default:
      sidebarClass = '';

  }

  container.classList.remove('large-sidebar', 'medium-sidebar', 'small-sidebar');
  container.classList.add(sidebarClass);

}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100vh;
}

.page-container {
  width: 100%;
  height: 100%;
  display: flex;
  /* This will be default value */
  --sidebar-width: 300px;
}

.content {
  padding: 10px;
}

/* Sidebar width is defined in this block */
.page-container.large-sidebar {
  --sidebar-width: 400px;
}
.page-container.medium-sidebar {
  --sidebar-width: 300px;
}
.page-container.small-sidebar {
  --sidebar-width: 200px;
}

.sidebar {
  height: 100%;
  width: var(--sidebar-width);
  background-color: limegreen;
}

<div id="container" class="page-container">
  <div class="sidebar"></div>
  <div class="content">
    <button class="toggleSidebar" onclick="toggleSidebar('sm');">Toggle small</button>
    <button class="toggleSidebar" onclick="toggleSidebar('md');">Toggle medium</button>
    <button class="toggleSidebar" onclick="toggleSidebar('lg');">Toggle large</button>
  </div>
</div>

这样，您只需添加新的.page-container.somesize-sidebar即可添加新的边栏尺寸，而无需触摸.sidebar选择器。

如果您想为不同的屏幕使用不同的侧边栏尺寸-您可以在.page-container.small-sidebar查询中放入@media和其他内容。

是否有进行@media查询或自定义类的简便方法？

1 个答案: