css - sintaxis - subconsultas sql pdf

Anidar consultas de medios

Question

Por defecto quiero darle a mi elemento de cuerpo un borde verde. En un dispositivo que admita la pantalla retina, primero quiero comprobar el tamaño. En un ipad quiero darle a mi cuerpo un borde rojo y en un iphone quiero darle un borde azul. Pero las consultas de medios anidados como así no funcionan:

body { border: 1px solid green; }

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
   @media (max-width: 768px) and (min-width: 320px) {
      body { border: 1px solid red; }
   }
   @media (max-width: 320px) {
      body { border: 1px solid blue; }
   }
}

Answer 1

No. Debe usar el operador y escribir eso como dos consultas. Sin embargo, puede hacer esto en SCSS, que se compilará en CSS, pero los combinará desplegándolos y utilizando el operador and .

Este es un problema común, y una vez que escribí LESS o SCSS, no quise volver a escribir de esta manera.

CSS de larga duración:

@media (-webkit-min-device-pixel-ratio: 2) and (max-width: 768px) and (min-width: 320px),
                  (min-resolution: 192dpi) and (max-width: 768px) and (min-width: 320px) {
  body {
    border: 1px solid red;
  }
}
@media (-webkit-min-device-pixel-ratio: 2) and (max-width: 320px),
                  (min-resolution: 192dpi) and (max-width: 320px) {
  body {
    border: 1px solid blue;
  }
}

Las consultas de anidación pueden funcionar, pero el soporte varía según los navegadores.