<!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>