CSS Media Query

full-screen  Size
 

CSS-Medienabfrage

Jedes Gerät kann unterschiedliche Eigenschaften wie Größe, Typ, Auflösung, Farbe, Ausrichtung usw. haben. CSS @media- Abfrage zum Anwenden eines bedingten CSS- Stils, der auf den Geräteeigenschaften basiert. Es gibt zwei Möglichkeiten, eine Medienabfrage in eine Webanwendung aufzunehmen

@media not|only mediatype and (media feature) {
// css code;
}
<link rel='stylesheet' media='mediatype and|not|only (media feature)' href='style.css'>
Generische Responsive-Vorlage - Dies ist die beste Methode, um die folgenden Medienabfragen zu verwenden
/*desktops - higher resolution*/
@media (min-width: 1281px)

/*laptops, desktops*/
@media (min-width: 1025px) and (max-width: 1280px)

/*tablets, ipads (portrait)*/
@media (min-width: 768px) and (max-width: 1024px)

/*tablets, ipads (landscape)*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape)

/*low resolution tablets, mobiles (landscape)*/
@media (min-width: 481px) and (max-width: 767px)

/*smartphones mobiles (portrait)*/
@media (min-width: 320px) and (max-width: 480px)

47 results are available, use up and down arrow keys to navigate.
@media all
@media print
@media screen
@media speech
47 results are available, use up and down arrow keys to navigate.
@media all
@media print
@media all