javascript - 不在桌面版时隐藏 Logo

Question

当我们在移动 View 中时，如何修改我的头像以隐藏 Logo 元素？

<style type="text/css">
/*<![CDATA[*/
.jtpl-logo {
    padding: 0 30px;
    width: 250px;
    transition: all 0,5s ease 0s !important;
    position: fixed;
    z-index: 1000000;
    min-width: 0000px;
    overflow: visible;
}
.jtpl-navigation { 
    transition: all 0.5s ease 0s !important;
    position: fixed;
    width: 100%;
    z-index: 100000;
    text-align: center;
    padding-left: 300px;
    background-color: #e30613;
}

/*]]>*/
</style>

现在我已经使用 head 来固定导航栏和 logo 元素以在滚动期间保持在顶部。如果我们在移动 View 中，或者说当我们小于 768 像素的屏幕宽度时，我可以告诉 Logo 容器删除，那将是完美的。

这可能吗？我发现结合 jimdo 寻找这方面的提示是一件很忙的事情。

Answer 1

您可以使用 CSS3 媒体查询来指定仅在特定情况下应用的样式。要在小于 768 像素的屏幕上隐藏您的 Logo :

@media (max-width: 768px) {
  .jtpl-logo {
    display: none;
  }
}

有关媒体查询的更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries