Su vostra richiesta, questo articolo coprirà Richieste dei media, che significa usare Tipi di media insieme a una o più espressioni relative alle caratteristiche di un supporto per definire la formattazione per diversi dispositivi. I browser o le applicazioni leggono le espressioni definite in Domandae se il dispositivo in questione soddisfa tali condizioni, il corrispondente CSS viene applicata.
I tipi di media specificano a quale tipo di media è destinato un determinato blocco di CSS. L'HTML è stato creato per essere portabile, ovvero per essere letto e interpretato da qualsiasi tipo di dispositivo. Tuttavia, ogni dispositivo visualizza l'HTML in modo diverso a causa di fattori come le dimensioni dello schermo (ad esempio, "risoluzione”). Ad esempio, l'accesso a un sito da un desktop non si comporterà allo stesso modo dell'accesso da un dispositivo mobile, perché si tratta di dispositivi diversi con impostazioni diverse contesti di navigazione.
La sfida con le query multimediali oggi è che sempre più dispositivi emergono con dimensioni dello schermo variabili e capacità hardware simili ai desktop, portandoli a navigare quasi come macchine desktop. Prendi il iPhone X Ad esempio: la qualità di visualizzazione è superba e il browser visualizza le pagine esattamente come un normale browser desktop.
In tal caso, non è necessario preparare un layout e un CSS specifici per palmare tipi di media su iPhone, poiché, pur essendo un dispositivo portatile, non si comporta come tale. Eppure, non si comporta nemmeno esattamente come un desktop. Sebbene il motore di rendering di Safari sia identico a quello della versione desktop, il comportamento e gli schemi di navigazione dell'utente sono comunque diversi. Ci troviamo quindi in una posizione intermedia: non possiamo fornire un CSS completamente separato per la versione portatile, né possiamo affidarci esclusivamente a un desktop (schermo) foglio di stile.
Di seguito è riportato come definire quali regole del foglio di stile devono essere caricate:
<style>
@media screen e (larghezza massima: 1024px) {
.small-resolution { display: none; }
}
.piccola risoluzione { display: blocco; }
</style>
Facoltativamente, puoi creare un file separato .css archiviarlo e ospitarlo sul tuo server o tramite la soluzione CDN della mia startup, Blenner SmartCDNQuindi, includilo nella sezione metadati del tuo HTML in questo modo:
<link rel=”stylesheet” href=”URL_OF_YOUR_CSS_FILE”>
Una volta inserito il file CSS, è sufficiente "chiamare" la classe ovunque sia necessario il comportamento reattivo. Ad esempio, per applicarla a un'immagine racchiusa in un tag personalizzato denominato "C":
<c class=”small-resolution”>
<img src="”IMAGE_URL”" alt=""DESCRIZIONE"" id="”OPTIONAL_ADDITIONAL_ID”">
</c>
Spero che questo ti aiuti! 😀
Lasciate i vostri commenti qui sotto e condivideteli con i vostri amici!
