javascript - 不在桌面版时隐藏 Logo

标签 javascript jquery html css

当我们在移动 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 寻找这方面的提示是一件很忙的事情。

最佳答案

您可以使用 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

关于javascript - 不在桌面版时隐藏 Logo ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41006290/

相关文章:

javascript - x = document.getElementById ("id").className = & x = document.getElementById ("id"), x.className = 之间的区别

jquery - 应使用什么策略来最小化页面初始化抖动?

javascript - jQuery.val() 不适用于 &lt;input&gt; 标签

javascript - 如果尚未在 localStorage 中,如何将新对象推送到数组

javascript - 淡入/淡出、向上/向下滑动方法重复/完成得太快

Ajax 调用后 jQuery UI 选项卡不工作

javascript - 如何处理 IE 错误

javascript - 如何使用 jQuery 循环访问 WordPress WP_Query 对象?

javascript - 更新角色一次仅允许用户使用一个角色

javascript - 如何使用 Angular 和 ngAnimate 平滑地显示带有背景和文本的 block ?