html - Vue.js:无法使用 CSS 媒体查询隐藏带有侧边栏的 div

Question

我尝试用这种方法隐藏侧边栏的 div:

/* For mobile phones: */
@media (max-width: 576px) {
 .sidebar {
  display: none!important;
 }
}

/* For tablets */
@media (max-width: 768px) {
 .sidebar {
  display: none!important;
 }
}

侧边栏遵循这些规则，但内容似乎正在消失，但 <div>其实是入住。可能是这样因为<div>与侧边栏实际上是一个组件。但后来我不知道如何解决它。

我的页面:

<template>
 <div>
  <sidebar />
  <main-content/>
 </div>
</template>

侧边栏组件:

<template>
<div class="sidebar">
    <div class="sidebar-header">
      <div class="logo"><img src="../../../components/img/logo.svg"/></div>
      <a href="#" id="title">System</a>
    </div>
    <ul class="sidebar-nav">
      <!--<li><a href="#">Home</a></li>-->
      <!--<li><a href="#">Popular</a></li>-->
      <!--<li><a href="#">News and events</a></li>-->
      <!--<li><a href="#">Pages</a></li>-->
      <li class="nav-item">
          <a href="#"><img class="nav-icon" src="../../../components/img/users.svg" />Users</a>
            <ul>
              <li class="nav-item"><a href="#">Import</a></li>
              <li class="nav-item"><a href="#">Invitation</a></li>
            </ul>
      </li>
      <!--<li><a href="#">Organisation</a></li>-->
      <li class="nav-item">
          <a href="#"><img class="nav-icon" src="../../../components/img/polls.svg" />Poll</a>
      </li>
    </ul>
  </div>
</template>

Answer 1

您的组件样式很可能是作用域。查看documentation它是如何工作的。

---

一个可行的解决方案是将样式 block 移动到组件本身:

<template>
<div class="sidebar">
    <div class="sidebar-header">
      <div class="logo"><img src="../../../components/img/logo.svg"/></div>
      <a href="#" id="title">System</a>
    </div>
    <ul class="sidebar-nav">
      <li class="nav-item">
          <a href="#"><img class="nav-icon" src="../../../components/img/users.svg" />Users</a>
            <ul>
              <li class="nav-item"><a href="#">Import</a></li>
              <li class="nav-item"><a href="#">Invitation</a></li>
            </ul>
      </li>
      <li class="nav-item">
          <a href="#"><img class="nav-icon" src="../../../components/img/polls.svg" />Poll</a>
      </li>
    </ul>
  </div>
</template>

<style scoped>
/* For mobile phones: */
@media (max-width: 576px) {
 .sidebar {
  display: none !important;
 }
}

/* For tablets */
@media (max-width: 768px) {
 .sidebar {
  display: none !important;
 }
}
</stlyle>

Another solution is to declare a non scoped style block, this usually goes in your App.vue file.