Come Fare Contenuti Visibili solo da Mobile o Desktop in CSS

Se volete mostrare dei contenuti diversi tra desktop e mobile vi basteranno 2 semplici passaggi.

Prima di tutto inserite nel vostro foglio di stile css il seguente codice:

/* Mobile in modalità landscape */
@media only screen and (min-width: 180px) and (max-width: 599px) {
.desktop {
display: none;
visibility: hidden;
}
}
/* Tablet */
@media only screen and (min-width: 600px) and (max-width: 1239px) {
.desktop {
display: none;
visibility: hidden;
}
}
/* Desktop*/
@media only screen and (min-width: 1240px) and (max-width: 2480px) {
.mobile {
display: none;
visibility: hidden;
}
}

è possibile modificare le risoluzioni dello schermo di destinazione ed aggiungere quelle che più ci servono,  modificando min-width e max-width, all interno delle graffe inseriamo tutto lo stile che ci occorre differire da un dispositivo all'altro, il codice comune invece mettetelo prima o dopo ciò che abbiamo appena inserito.

Successivamente nella pagina web in cui volete usare il codice vi basterà inserire all'interno del div con la classe creata il contenuto scelto. esempio:

<div class="desktop">/Contenuto solo per desktop</div>

Sostituiamo desktop con mobile per inserire il contenuto solo per mobile ed il gioco è fatto, con questo metodo potrete creare rapidamente stili differenziati sia di un'unico oggetto che di pagine web intere.

Lascia un Commento

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *