时间戳

首页 > 解决方案 > 显示两个相邻的 div，然后在另一个下方显示两个不同的 SCSS 文件

css - 显示两个相邻的 div，然后在另一个下方显示两个不同的 SCSS 文件

问题描述

我有这个 HTML：

<div className="tab-header">
  <div className="container-header-comp">
    <div className="header-comp">some-text</div>
  </div>
  <div className="header-options">
    <div className="header-options-text">some-text</div>
  </div>
</div>

很简单。我有两个 SCSS 文件，一个用于我的应用程序的两个响应式设计（page.scss 和 page-responsive.scss）

我想相邻显示“container-header-comp”和“header-options”，所以我的 page.scss 看起来像这样（并且效果很好）：

.tab-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

现在，如果我想显示相同的类，而不是彼此相邻，我希望它们一个在另一个之下以用于我的响应式设计。所以在 page-responsive.scss 我简单地这样做了：

.tab-header{
  grid-template-columns : 1fr;
}

由于它在另一个文件中，因此该样式不适用于我的课程（除非我应用 !important 我不想这样做）。如何用我的两个 scss 文件实现这个技巧？

标签： csssass

解决方案

尝试

@media only screen and (max-width: 600px) {
{
    ....
   }
}

推荐阅读