| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>REM lengths in media queries relative to initial value</title> |
| <style> |
| html { font-size: 10000px } |
| body { font-size: 16px } |
| @media (min-width: 2rem) { |
| #t1 { color: green } |
| } |
| @media (min-height: 2rem) { |
| #t2 { color: green } |
| } |
| @media (min-device-width: 2rem) { |
| #t3 { color: green } |
| } |
| @media (min-device-height: 2rem) { |
| #t4 { color: green } |
| } |
| </style> |
| </head> |
| <body> |
| <p><span id="t1">This</span> <span id="t2">text</span> <span id="t3">should<span> <span id="t4">be green.</span></p> |
| </body> |
| </html> |
