CODEWITHSUNDEEP
htmlcssmedia-queries
Michael Phelps
Michael Phelps

Reputation: 3591

How scaling page associated with the media-queries?

How scaling page associated with the media-queries ?

@media only screen and (min-width: 500px) {
body { background-color: blue; }
}

@media only screen and (min-width: 800px) {
body { background-color: green; }
}

@media only screen and (min-width: 1000px) {
body { background-color: orange; }
}

I start to play with the zoom page in a browser and I trigger different queries rules ... What is the reason this effect? My Screen size is not 500px!

Upvotes: 0

Views: 36

Answers (1)

Gho
Gho

Reputation: 568

It's not referring to your screen size, but actually the window size. You can trigger those events either by rescaling your window with your mouse or by pressing "ctrl" and "+" or "ctrl" and "-". So for a resolution higher than 1000 you will have a background orange, for 800 and higher a background green, and for 500 and higher a background of blue;.

Upvotes: 1

Related Questions