Resize the browser window to see background color change according to width.
@media (max-width: 600px) { .width-box { background: #ff6b6b; } }
@media (min-width: 601px) and (max-width: 1024px) { .width-box { background: #1dd1a1; } }
@media (min-width: 1025px) { .width-box { background: #54a0ff; } }
Change window height to see font size and background color change.
@media (max-height: 500px) { .height-box { font-size: 16px; background:#ff9ff3; } }
@media (min-height: 501px) { .height-box { font-size: 20px; background:#00d2d3; } }
Rotate your device or adjust window orientation to see background change.
@media (orientation: portrait) { .orientation-box { background: #feca57; } }
@media (orientation: landscape) { .orientation-box { background: #54e346; } }