OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 <title>REM lengths in media queries relative to initial value</title> | |
5 <style> | |
6 html { font-size: 10000px } | |
7 body { font-size: 16px } | |
8 @media (min-width: 2rem) { | |
9 #t1 { color: green } | |
10 } | |
11 @media (min-height: 2rem) { | |
12 #t2 { color: green } | |
13 } | |
14 @media (min-device-width: 2rem) { | |
15 #t3 { color: green } | |
16 } | |
17 @media (min-device-height: 2rem) { | |
18 #t4 { color: green } | |
19 } | |
20 </style> | |
21 </head> | |
22 <body> | |
23 <p><span id="t1">This</span> <span id="t2">text</span> <span id="t3">should< span> <span id="t4">be green.</span></p> | |
24 </body> | |
25 </html> | |
OLD | NEW |