Qual è la differenza tra schermo e solo schermo nelle query multimediali?

Qual è la differenza tra schermo e solo schermo nelle query multimediali?
Al fine di costruire un web design reattivo, viene utilizzata una query multimediale. Indica che le viste della pagina Web differiscono da un sistema a sistema a seconda del tipo di media o schermo. Le query multimediali consentono inoltre di applicare gli stili CSS in base al tipo generale di un dispositivo, come una schermata di stampa e altre specifiche, come la risoluzione dello schermo o la larghezza della vista del browser.

Questo post spiegherà ciò che distingue lo "schermo" dalla "solo schermata" nelle query multimediali.

Cosa distingue "Screen" da "Solo schermo" nelle query multimediali?

"schermo"È utilizzato per impostare le dimensioni dello schermo all'interno della query multimediale. In particolare, la dimensione dello schermo può essere impostata utilizzando "larghezza massima" E "larghezza min"Proprietà CSS. La dimensione dello schermo differisce dallo schermo a schermo. Pertanto, la parola chiave "unica" è quindi determinata per impedire ai browser precedenti di utilizzare gli stili forniti in quanto non gestiscono le query multimediali contenenti funzionalità dei media.

Come utilizzare le query multimediali "schermo"?

Per utilizzare il "schermo"In una query multimediale, controlla le istruzioni elencate.

Passaggio 1: inserire un'intestazione

Innanzitutto, utilizzare il tag di intestazione HTML per aggiungere un'intestazione all'interno del documento HTML. Ad esempio, il “

Passaggio 2: aggiungi il testo nel paragrafo

Successivamente, aggiungi il testo nel paragrafo con l'aiuto di "

Applica la regola @media


Abbiamo impostato la larghezza dello schermo.

Produzione

Passaggio 3: applicare lo stile sull'elemento "corpo"

Accedi all'elemento corporeo e applica le proprietà CSS per lo styling:

corpo
Background-color: verde;

Per farlo, il "colore di sfondo"La proprietà viene utilizzata per allocare un colore sul retro dell'elemento.

Passaggio 4: imposta "@media schermata"

Secondo i nostri requisiti, abbiamo impostato la larghezza di un documento su "300"Pixel o meno. Il colore di sfondo è "BLUE LIGHI". In caso contrario, sarà "verde". Per fare ciò, utilizzare il "@media schermata"E imposta la larghezza massima dello schermo. Successivamente, accedi al corpo e applica le seguenti proprietà CSS:

@media screen e (massimo-larghezza: 300px)
corpo
Background-color: Lightskyblues;
Colore: RGB (226, 12, 12);

Qui:

  • Il valore del "colore di sfondo"È impostato come"BLUE LIGHI".
  • "colore"Proprietà utilizzata per impostare il colore per il testo all'interno dell'elemento.

Produzione

Come utilizzare le query multimediali "solo schermo"?

IL "soltanto"La parola chiave impedisce ai browser di applicare gli stili specificati che non sono supportati dalle query multimediali con le funzionalità dei media. Segui le istruzioni per utilizzare il "Solo schermo"Nelle domande sui media.

Passaggio 1: stile "corpo"

Accedere al corpo e applicare il “colore di sfondo"Per specificare il colore sul retro dell'elemento sullo schermo.

Passaggio 2: applicare la query multimediale con "solo schermo"

Ora, applica una query multimediale con "Solo schermo"Per impostare la larghezza dello schermo. Per fare ciò, il valore del "Solo schermoLa proprietà "è impostata come"400px".

Passaggio 3: impostare la proprietà "color background"

Ancora una volta, accedi al corpo e applica "colore di sfondo" Ancora:

corpo
Background-color: RGB (235, 185, 23);

@media solo schermo e (larghezza massima: 400px)
corpo
Background-color: RGB (17, 97, 202);

Quando abbiamo impostato la larghezza di un documento su "400"Pixel o meno, il colore di sfondo è"RGB (17, 97, 202)". Altrimenti, è "RGB (235, 185, 23)".

Produzione

Si tratta della distinzione tra schermo delle query multimediali e solo schermo.

Conclusione

La distinzione tra "Solo schermo" E "schermo"Nelle domande dei media è che"schermo"È impiegato per indicare la dimensione dello schermo della query multimediale. IL "larghezza massima" E "larghezza min"Può essere utilizzato per controllare la dimensione dello schermo. Poiché ogni schermo ha una dimensione dello schermo distinta, "soltanto"La parola chiave viene utilizzata per evitare di implementare gli stili specificati nei browser precedenti che non consentono le query multimediali. Questo post ha spiegato la distinzione tra "solo schermo" e "schermo" nelle query dei media.