¿Cómo orientar la publicidad a equipos de escritorio, tabletas y dispositivos móviles con Media Query?

Media Query es una técnica popular que permite entregar una hoja de estilo a diferentes dispositivos que tienen diferentes tamaños de pantalla y resoluciones respectivamente. Se utilizan para personalizar la apariencia de un sitio web en múltiples dispositivos. Una consulta de medios consta de un tipo de medio que puede contener una o más expresiones que pueden ser verdaderas o falsas. El resultado de la consulta es verdadero si el medio especificado coincide con el tipo de dispositivo en el que se muestra el documento. Si la consulta de medios es verdadera, se aplica la hoja de estilo.

Las resoluciones de pantalla de los diferentes dispositivos se enumeran a continuación:

Móvil (teléfono inteligente) ancho máximo: 480 px
Tabletas de baja resolución y iPads max-width: 767px
Tabletas Ipads modo retrato max-width:1024px
Ancho máximo de escritorios: 1280px
Tamaño enorme (pantalla más grande) ancho máximo: 1281 px y mayor

Sintaxis:

@media( media feature ) {
    // CSS Property
}

Utiliza la regla @media para incluir un bloque de propiedades CSS cuando se cumple una determinada condición. Ciertas características de los medios son el ancho (ancho máximo y ancho mínimo), la relación de aspecto, la resolución, la orientación, etc.

Ejemplo:

html

<!DOCTYPE html>
<html>
      
<head>
    <title>Media Query</title>
      
    <style>
          
        /* Media Query for Mobile Devices */
        @media (max-width: 480px) {
            body {
                background-color: red;
            }
        }
          
        /* Media Query for low resolution  Tablets, Ipads */
        @media (min-width: 481px) and (max-width: 767px) {
            body {
                background-color: yellow;
            }
        }
          
        /* Media Query for Tablets Ipads portrait mode */
        @media (min-width: 768px) and (max-width: 1024px){
            body {
                background-color: blue;
            }
        }
          
        /* Media Query for Laptops and Desktops */
        @media (min-width: 1025px) and (max-width: 1280px){
            body {
                background-color: green;
            }
        }
          
        /* Media Query for Large screens */
        @media (min-width: 1281px) {
            body {
                background-color: white;
            }
        }
    </style>
</head>
  
<body style = "text-align:center;">
    <h1>GeeksforGeeks</h1>
    <h2>Media Query</h2>
</body>
  
</html>

Producción: