[CSS] Dynamic viewport (动态视口单位)

Browser support: https://caniuse.com/?search=Dynamic%20viewport%20units

Dynamic viewport mainly resolve the issue of mobile web, due to mobile has floating header, sometimes it will be hidden whne user scrolling, which cause the height size of web page is not a static value.

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      /* lvh：最大，svh：最小，dvh：动态调节 */
      .box1 {
        width: 100dvw;
        height: 100dvh;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <h2>Dynamic viewport (动态视口单位)</h2>
    <div class="box1"></div>
  </body>
</html>

 

dvmin: Choose the smaller value between width and height

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      /* dvmin：逻辑视口宽度和高度中较小的那个 */
      .box1 {
        width: 100dvw;  /* 100dvw和100dvh中的小的那个 -> 竖屏下 100dvw 横屏下 100dvh */
        height: 100dvmin;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <h2>Dynamic viewport (动态视口单位)</h2>
    <div class="box1"></div>
  </body>
</html>

posted @ 2025-05-26 13:39  Zhentiw  阅读(20)  评论(0)    收藏  举报