我們做網站有時候會出現這樣的一種情況要求:圖片或者廣告在PC電腦端需要顯示,但是在WAP手機移動端需要隱藏起來,如何實現呢?這個問題很多朋友咨詢過361源碼今天抽時間給大家做個小教程。
實現場景:
在小屏手機上或者是PAD上把指定區域的內容隱藏,電腦端不變。比如一段廣告或者一個說明只想要在電腦端顯示手機端隱藏。
實現方法:
通過JS加CSS實現相對繁瑣一些,但是效果也是很明顯和實用的,今天在這里就不做介紹了,如果有需要做這樣效果的朋友可以聯系361源碼在線客服幫您有償處理。
在需要隱藏的區域加一個DIV,例如想在手機端隱藏bigpic這張圖片,代碼如下:
<div class="none"><img src="http://m.survivalescaperooms.com/bigpic.jpg"/></div>
然后把DIV加一個樣式代碼如下:
@media screen and (max-width: 1000px) { .none{display:none; }}(注意啦!上面的1000px表示如果屏幕尺寸達到了1000像素以下將會隱藏否則顯示。具體數值可以自行調試)
以上就是div+css實現電腦端顯示手機端隱藏代碼的全部內容,希望對大家的學習和解決疑問有所幫助,也希望大家多多支持武林網。新聞熱點
疑難解答