#window.floors, #window.apartments { @media (max-width: 140vh) { ... } }

In ie 11 and below does not plow. In Safari, FF, Chrome (the latter) are all OK. I tried to add the screen type all, screen - also did not save. If you replace the pixels, then everything is ok. But we need exactly dynamic units :)

Example:

index.html

 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <link rel="stylesheet" type="text/css" href="main.css"> <title></title> </head> <body> <div id="window" class="apartment"> <span>This is TEEEEXT!</span> </div> </body>

main.css

 html, body { margin: 0; padding: 0; } #window { position: relative; height: 100vh; width: 100%; } #window.apartment { display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; } #window.apartment span { font-size: 20px; } @media (max-width: 140vh) { #window.apartment span { font-size: 40px; } }
  • Please collect a complete example where you can view the operation of your code and test the performance in IE. - VenZell
  • @VenZell I beg and complain - Daniel

1 answer 1

To do this, use a special library - viewport-units-buggyfill

Just connect the library at the end of the html page:

 <script src="viewport-units-buggyfill.js"></script> <script> window.viewportUnitsBuggyfill.init(); // простое подключение /* var hacks = require('viewport-units-buggyfill.hacks'); require('viewport-units-buggyfill').init({ hacks: hacks }); */ </script>
  • Those. Is this an IE bug? - Daniel
  • @Daniel, I would say a flaw. - Vasin Yuriy