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)

@media all
for all devices like printers, screens, tablets, smart-phones etc.
@media print
paged material and for documents viewed on screen in print preview mode
@media screen
primarily for color computer screens
@media speech
for speech synthesizers
@media (any-hover: hover)
any available input which can hover over elements
@media (any-pointer: fine)
device has a input device that supports pointers (accurate pointing device)
@media (any-pointer: coarse)
device has a input device that supports pointers (average pointing device)
@media (aspect-ratio: 1/1)
screen ratio between width/height (1/1 is for square screen)
@media (min-aspect-ratio: 800/600)
minimum screen ratio between width/height
@media (max-aspect-ratio: 8/5)
maximum screen ratio between width/height
@media (color)
only for color device
@media (color: 8)
color device with 8 bits per color component
@media (min-color: 8)
color device with at least 8 bits per color component
@media (max-color: 256)
color device with at max 8 bits per color component
@media (color-index)
has device with color lookup table
@media (min-color-index: 256)
at least number of entries in the output device's color lookup table
@media (max-color-index: 15000)
at max number of entries in the output device's color lookup table
@media (grid: 0)
select bitmap based device (screen, projection, print, tv, handheld)
@media (grid: 1)
select grid based device (braille, embossed, tty, handheld)
@media (width: 640px)
exact screen width
@media (min-width: 728px)
minimum screen width to any width (min to any)
@media (max-width: 600px)
any minimum screen width upto given width (any to max)
@media (height: 360px)
exact screen height
@media (min-height: 360px)
minimum screen height to any height (min to any)
@media (max-height: 360px)
any minimum screen height upto given height (any to max)
@media (hover: hover)
primary input mechanism can hover over elements
@media only screen and (min-device-aspect-ratio:1920/1080)
media query with multile conditions
@media (min-device-width: 400px)
min width of the device itself (screen resolution of the device)
@media (max-device-width: 400px)
max width of the device itself (screen resolution of the device)
@media min-device-height
min height of the device itself (screen resolution of the device)
@media max-device-height
max height of the device itself (screen resolution of the device)
@media monochrome
number of bits per pixel in a monochrome frame buffer
@media min-monochrome: 2
monochrome devices with more than 2 bits per pixels
@media max-monochrome
monochrome devices with max limit
@media resolution
resolution of the output device, i.e. the density of the pixels
@media min-resolution: 300dpi
devices with resolution greater than 300 dots per inch
@media max-resolution: 118dpcm
resolution less than 118 dots per centimeter
@media orientation: portrait
The device is in a portrait orientation ( height >= width )
@media orientation: landscape
The device is in a landscape orientation ( width > height)
@media overflow-block
device handles content that overflows ( none, scroll, paged, optional-paged )
@media overflow-inline
device handles content that overflows the initial containing block along the inline axis
@media scan:interlace
device draws odd lines and even lines alternately
@media scan:progressive
device draws all lines in sequence. All computer screens use progressive scanning
@media scripting:initial-only
scripting is enabled during the initial page load, but not afterwards (like JavaScript)
@media scripting:enabled
device support scripting & enabled (ie JavaScript)
@media update-frequency:slow
check task frequency of slow device (like e-book reader, document print)
@media update-frequency:fast
check task frequency of fast device (like computer screen)

@media all