當不在桌面版本時隱藏徽標

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媒體查詢來指定僅在特定情況下適用的樣式。若要隱藏在屏幕上比768px小徽標：

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