can you give me an example of media queries where depending of 3 screen sizes you apply different css background-color classes
[{'user_id': 'b877e4dd-5ef4-4f6a-9fe7-d4f776aa0785', 'value': '¿Puedes darme un ejemplo de media queries donde, dependiendo de 3 tamaños de pantalla, aplicas diferentes clases de colores de fondo CSS?', 'status': 'submitted'}]
Claro, aquí te dejo un ejemplo de cómo usarías las consultas de los medios para aplicar diferentes clases de color de fondo en CSS dependiendo del tamaño de la pantalla.

Inglés:
```css
body {
    background-color: blue; /* default color for extra small devices */
}

/* Small devices (landscape phones, less than 576px) */
@media (min-width: 576px) {
  body {
    background-color: red; /* color for small devices */
  }
}

/* Medium devices (tablets, less than 768px) */
@media (min-width: 768px) {
  body {
    background-color: green; /* color for medium devices */
  }
}

/* Large devices (desktops, less than 992px) */
@media (min-width: 992px) {
  body {
    background-color: yellow; /* color for large devices */
  }
}
```

Español:
```css
body {
    background-color: blue; /* color predeterminado para dispositivos extra pequeños */
}

/* Dispositivos pequeños (teléfonos en paisaje, menos de 576px) */
@media (min-width: 576px) {
  body {
    background-color: red; /* color para dispositivos pequeños */
  }
}

/* Dispositivos medianos (tablets, menos de 768px) */
@media (min-width: 768px) {
  body {
    background-color: green; /* color para dispositivos medianos */
  }
}

/* Dispositivos grandes (ordenadores de escritorio, menos de 992px) */
@media (min-width: 992px) {
  body {
    background-color: yellow; /* color para dispositivos grandes */
  }
}
```
{"source": "ewof/sharegpt-instruct-unfiltered-deduped", "kind": "human", "evolved_from": null}