HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> @media (orientation: landscape) { h1{ color:green; } } @media (orientation: portrait) { h1{ color:blue; } } </style> </head> <body> <h1>CSS @media orientation</h1> <p><strong>Note</strong>: Resize the width of this output screen and check the following.</p> <ul> <li>If h1 color is green, then the output screen is in 'landscape' mode.</li> <li>If h1 color is blue, then the output screen is in 'portrait' mode.</li> </ul> </body> </html>
OUTPUT
×

Save as Private