CSS媒體queriesto隱藏或顯示內容

好了，所以我不能看到什麼了這一點，我有兩個divsCSS媒體queriesto隱藏或顯示內容

HTML

<div id="desktop-content"> 
desktop 
</div> 

<div id="mobile-content"> 
mobile 
</div>

每個人都應該，如果手機屏幕上打印移動和隱藏桌面另一個在桌面上展示，但隱藏在手機上。

這裏是我的查詢

@media screen and (min-width: 0px) and (max-width: 200px) { 
    #mobile-content { display: block; } /* show it on small screens */ 
} 

@media screen and (min-width: 201px) and (max-width: 1024px) { 
    #mobile-content { display: none; } /* hide it elsewhere */ 
} 

@media screen and (min-width: 0px) and (max-width: 200px) { 
    #desktop-content { display: none; } /* hide it on small screens */ 
} 

@media screen and (min-width: 201px) and (max-width: 1024px) { 
    #desktop-content { display: block; } /* show it elsewhere */ 
}

看起來很簡單，除了桌面打印時移動應該和桌面上的所有打印。

即時通訊媒體查詢，如果有人可以指出我的方式錯誤，我將不勝感激。

來源

2016-03-30 Beep

您的代碼有效。看小提琴。 https://jsfiddle.net/3q0mukLy/ – gwar9

嗯，我認爲它應該。其他地方一定是個問題。謝謝 – Beep

很簡單的錯誤，我在觀看寬屏顯示器上的CSS的參數之外。簡單的修復。

@media screen and (min-width: 0px) and (max-width: 600px) { 
    #mobile-content { display: block; } /* show it on small screens */ 
} 

@media screen and (min-width: 601px) { 
    #mobile-content { display: none; } /* hide it elsewhere */ 
} 

@media screen and (min-width: 0px) and (max-width: 600px) { 
    #desktop-content { display: none; } /* hide iton small screens */ 
} 

@media screen and (min-width: 601px) { 
    #desktop-content { display: block; } /* show it elsewhere */ 
}

來源

2016-03-30 20:37:09 Beep

好吧，默認情況下，你想讓手機顯示。導致您得到以下結果：

#mobile-content { 
    display: block; 
} 

#desktop-content { 
    display: none; 
} 

@media screen and (min-width: 768px) { 
    #mobile-content { 
     display: none; 
    } 

    #desktop-content { 
     display: block; 
    } 
}

這應該會導致移動內容默認爲可見，並且桌面內容默認爲不可見。當屏幕大小爲768px或更大時，它將切換並隱藏移動內容並顯示桌面內容。希望這可以幫助！

來源

2016-03-30 20:13:04 Craz1k0ek

首先進行使用相同的CSS多時間

更改代碼這樣

@media screen and (min-width: 0px) and (max-width: 768px) { 
    #mobile-content { display: block; } /* show it on small screens */ 
    #desktop-content { display: none; } /* hide it on small screens */ 
} 

@media screen and (min-width: 789px) and (max-width: 1024px) { 
    #mobile-content { display: none; } /* hide it elsewhere */ 
    #desktop-content { display: block; } /* show it elsewhere */ 
}

我們認爲手機和平板電腦的屏幕從768px

這裏開始是工作示例https://jsfiddle.net/3r1qe2Lc/3/

檢查調整小提琴

來源

2016-03-30 20:13:14

顯示移動和桌面，同樣的問題即時獲取 – Beep

請創建一個問題的小提琴 –

CSS媒體queriesto隱藏或顯示內容

回答

相關問題