can you give me an example of media queries where depending of 3 screen sizes you apply different css background-color classes
ab6e1297-92a6-4b72-9fd8-2f63d30c828f
Maaari mo ba akong bigyan ng halimbawa ng mga media queries kung saan depende sa tatlong screen sizes, maaari kang magkaroon ng iba't ibang css background-color classes
submitted
7a0edea3-6cb5-44c9-8ecf-fdf7935cf064
kaya mo bang magbigay ng halimbawa ng media queries kung saan mag-aapply ka ng iba-ibang css background-color classes depende sa 3 size ng screen 
submitted
Siya sigurado! Narito ang isang halimbawa ng media queries na kung saan depende sa tatlong sukat ng screen ay i-aapply mo ang iba't ibang css background-color classes.

```css
/* Pangunahing Kulay para sa mga screen na mas malaki sa 1200px */
body {
    background-color: #FFF;
}

/* Para sa mga screen na mas maliit o katumbas sa 1200px at malaki sa 800px, ito ang gagamitin na kulay. */
@media screen and (max-width: 1200px) and (min-width: 801px) {
    body {
        background-color: #AAA;
    }
}

/* Para sa mga screen na mas maliit o katumbas sa 800px at malaki sa 500px, ito ang gagamitin na kulay. */
@media screen and (max-width: 800px) and (min-width: 501px) {
    body {
        background-color: #777;
    }
}

/* Para sa mga screen na mas maliit o katumbas sa 500px, ito ang gagamitin na kulay. */
@media screen and (max-width: 500px) {
    body {
        background-color: #555;
    }
}
```

Sa halimbawang ito, ang unang klase sa `body` ay ang default na kulay na gagamitin para sa mga screen na may sukat na mas malaki sa 1200px. Kapag sumusunod na mas maliit sa 1200px, 800px, at 500px, ang media queries natin ay nag-aapply ng iba't-ibang css background-color classes. Ito ang very basic na paggamit ng media queries para sa responsive design.
{"source": "ewof/sharegpt-instruct-unfiltered-deduped", "kind": "human", "evolved_from": null}