nascondi il tag div solo sulla visualizzazione mobile?

Question

Sto creando un layout fluido per un sito. Sto cercando di nascondere il contenuto di uno o l'intero <div> nella visualizzazione mobile, ma non la visualizzazione del tablet e del desktop.

Ecco quello che ho finora ...

#title_message { 
    clear: both; 
    float: left; 
    margin: 10px auto 5px 20px; 
    width: 28%; 
    display: none; 
} 

ho il display impostato a 'none' per il layout mobile e impostato come blocco sui tracciati tablet/desktop ... C'è un modo più semplice per farlo, o è così?

Answer 1

avrete bisogno di due cose. Il primo è @media screen per attivare il codice specifico a una determinata dimensione dello schermo, utilizzato per la progettazione reattiva. Il secondo è l'uso dell'attributo visibility: hidden. Una volta che il browser/schermo raggiunge 600 pixel, lo #title_message verrà nascosto.

@media screen and (max-width: 600px) { 
    #title_message { 
    visibility: hidden; 
    clear: both; 
    float: left; 
    margin: 10px auto 5px 20px; 
    width: 28%; 
    display: none; 
    } 
} 

EDIT: se si utilizza un altro CSS per cellulari poi basta aggiungere il visibility: hidden;-#title_message. Spero che questo ti aiuti!

Answer 2

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { #title_message { display: none; }} 

Questo sarebbe per un design reattivo con una singola pagina per uno schermo di iPhone in particolare. Stai effettivamente eseguendo il routing su un'altra pagina per dispositivi mobili?

Answer 3

Impostare la proprietà di visualizzazione su none come valore predefinito, quindi utilizzare una query sul supporto per applicare gli stili desiderati al div quando il browser raggiunge una certa larghezza. Sostituisci 768px nella query multimediale con qualunque sia il valore minimo di px dove deve essere visibile il tuo div.

#title_message { 
    display: none; 
} 

@media screen and (min-width: 768px) { 
    #title_message { 
     clear: both; 
     display: block; 
     float: left; 
     margin: 10px auto 5px 20px; 
     width: 28%; 
    } 
} 

Answer 4

provare questo

@media handheld{ 
    #title_message { display: none; } 
} 

Answer 5

È possibile seguire questo esempio. Sul vostro file CSS:

.deskContent { 
    background-image: url(../img/big-pic.png); 
    width: 100%; 
    height: 400px; 
    background-repeat: no-repeat; 
    background-size: contain; 
} 

.phoneContent { 
    background-image: url(../img/small-pic.png); 
    width: 100%; 
    height: 100px; 
    background-repeat: no-repeat; 
    background-size: contain; 
} 

@media all and (max-width: 959px) { 
    .deskContent {display:block;} 
    .phoneContent {display:none;} 
} 

@media all and (max-width: 479px) { 
    .deskContent {display:none;} 
    .phoneContent {display:block;} 
} 

sul vostro file HTML:

<div class="deskContent">Content for desktop</div> 
<div class="phoneContent">Content for mobile</div> 

Answer 6

La soluzione data non ha funzionato per me sul desktop, è appena mostrato entrambi i div, anche se il cellulare ha mostrato solo il cellulare div. Così ho fatto una piccola ricerca e ho trovato l'opzione di larghezza minima. Ho aggiornato il mio codice di seguito e funziona bene ora :)

CSS:

@media all and (min-width: 480px) { 
    .deskContent {display:block;} 
    .phoneContent {display:none;} 
} 

@media all and (max-width: 479px) { 
    .deskContent {display:none;} 
    .phoneContent {display:block;} 
} 

HTML:

<div class="deskContent">Content for desktop</div> 
<div class="phoneContent">Content for mobile</div>