Question

我正在尝试从我的网络应用页面（或我正在开发任何人）中删除两个元素。这是出于响应的原因，这些元素在移动设备上看起来很棒但在桌面上却不是很好。所以，我想通过url定位页面，然后获取元素并隐藏它们。

我正在使用node.js，但我有点像菜鸟。这是我可以用React或Vue或类似的东西实现的。我试过jQuery但没有成功。

这是html：

<body>
  <div>
    <section id="dot1">
      <h6>Text Here</h6>
    </section>
      <section id="dot2">
    <h6>Text Here</h6>
    </section>
    <section id="studiesWp"><img src="/images/ms.png">
      <h1>Text Here</h1>
      <p>Text Here</p><a href="url/">Text Here</p>
    </section>
  </div>
</body>

所以，我想隐藏两个元素：＃dot1＆amp; ＃DOT2。剩下的就可以了。

这是我尝试过的一个小jQuery函数：

$(window).load(function() {
  // Check media queries
  if($(window).width() >= 769) {
    // Get pathname of page
    var page = window.location.pathname;
    // If pathname matches any of these
    if(page = 'profilePage','projectsPage','contact'){

      // Remove two elements
      $('#dot1').css('display','none');
      $('#dot2').css('display','none');
    }
    else{
      $('#dot1').css('display','block');
      $('#dot2').css('display','block');
    }
  }
});

Answer 1

这最好与CSS3有关，CSS3只有在看到它的视口具有某些属性时才有媒体查询来应用样式。

仅限桌面的CSS

所以，如果我们想创建一个仅在手机上可见的元素，而我们的CSS只是桌面，我们可能会创建这样的东西：

/* This example will not work correctly, look below for the full code! */
.phone-only {
    display: none;
}

媒体查询

要使该样式仅适用于较大的屏幕，我们将使用@media查询。我们需要仅将样式应用于智能手机或屏幕宽度小于769px的设备。在CSS中，我们将其写为min-width: 769px，然后使用如下媒体查询包装它：@media (min-width: 769px)。

当我们在@media查询中包装我们之前创建的样式时，我们会得到一条css规则，用于隐藏手机上的元素。

@media (min-width: 769px) {
   .phone-only {
       display: none;
   }
}

并使用class="phone-only"。

选择应用程序各个页面的元素

1 个答案:

仅限桌面的CSS

媒体查询