Come Fare Contenuti Visibili solo da Mobile o Desktop in CSS - WordWeb

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 *

Questo sito utilizza i Cookie. Utilizzando il sito, ACCETTI il loro utilizzo da parte nostra. Maggiori Informazioni

Questo sito fa uso di cookie per migliorare l’esperienza di navigazione degli utenti e per raccogliere informazioni sull’utilizzo del sito stesso. Utilizziamo sia cookie tecnici sia cookie di parti terze per inviare messaggi promozionali sulla base dei comportamenti degli utenti. Può conoscere i dettagli consultando la nostra privacy policy qui sotto. Proseguendo nella navigazione si accetta l’uso dei cookie; in caso contrario è possibile abbandonare il sito.

Cliccando su Accetto o Continuando la Navigazione Accetti i Termini di Utilizzo


Continuando la navigazione esprimi il consenso per l'utilizzo dei cookie o di altro spazio di archiviazione locale laddove richiesto dalla legge, nonché per la raccolta, la condivisione e l'utilizzo dei dati personali ai fini della personalizzazione degli annunci.


Cos'è un cookie?


Un cookie è una piccola quantità di dati inviati al tuo browser da un server web e che vengono successivamente memorizzati sul disco fisso del tuo computer. Il cookie viene poi riletto e riconosciuto dal sito web che lo ha inviato ogni qualvolta effettui una connessione successiva. Come parte dei servizi personalizzati per i suoi utenti, il nostro sito utilizza dei cookie per memorizzare e talvolta tenere traccia di alcuni dei dati personali forniti dagli utenti stessi.Ti ricordiamo che il browser è quel software che ti permette di navigare velocemente nella Rete tramite la visualizzazione e il trasferimento delle informazioni sul disco fisso del tuo computer. Se le preferenze del tuo browser sono settate in modo da accettare i cookie, qualsiasi sito web può inviare i suoi cookie al tuo browser, ma – al fine di proteggere la tua privacy – può rilevare solo ed esclusivamente quelli inviati dal sito stesso, e non quelli invece inviati al tuo browser da altri siti. Se vuoi saperne di più poi consultare la nostra privacy policy qui. Puoi accettare i cookies e proseguire, oppure puoi abbandonare il sito.

Mostra l'Informativa Completa


Chiudi