Question

当我们处于移动视图中时，如何修改我的头部以隐藏徽标元素？

<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>

现在我已经使用头部来修复导航栏和徽标元素以在滚动期间保持在顶部。现在它将是完美的，如果我可以告诉徽标容器，如果我们在移动视图中删除，或者让我们说当我们小于768px的屏幕宽度。

这可能吗？我发现与jimdo一起找到这方面的提示非常匆忙。

Answer 1

您可以使用CSS3媒体查询指定仅在特定情况下适用的样式。在小于768像素的屏幕上隐藏您的徽标：

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

有关媒体查询的详情：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Answer 2

使用 CSS Media Queries 根据视口的大小有条件地使用各种CSS样式。

Answer 3

媒体查询可能会解决您的问题。

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
   .jtpl-logo {
       display: none;
   }
}

提示：我喜欢使用这个，因为它有一个好的和可用的断点集合https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints

Answer 4

隐藏在桌面使用@media喜欢

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

除桌面以外的其他标签

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

.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;
}
@media (min-width:961px)  {
.jtpl-logo {
    display: none;
}
}

<div class="jtpl-logo">
  </div>

不在桌面版本时隐藏徽标

4 个答案: