我在网站中使用大众和VH作为单元，但是当我打开检查选项卡时，我的网站设计发生了变化，那么如何解决这个问题呢？

i am using VW and VH in website as unit but when i am opening my inspection tab my websites design shift upword,so how to solve the issue?

提问人：shiv ram 提问时间：11/24/2022 更新时间：11/24/2022 访问量：364

问：

我是 Web 开发的新手......请为我建议一些解决方案，我使用“vw”作为宽度，使用“vh”作为高度，但是当我在移动设备中打开我的网站时，当我在笔记本电脑中打开网站并打开检查选项卡时，它不能很好地工作，我的网站设计上升了，所以我想要解决这个问题的解决方案

我正在尝试这个，但是当我打开浏览器的检查选项卡时它无法正常工作，它的大小会根据视图端口大小而变化......请帮我解决这个问题...谢谢。。。。

以下是HTML代码：- `

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>
      iNotebook
    </title>
  </head>
  <body>
    <div class="Navbar">
      <nav>
        <ul type="none">
          <h1>iNotebook</h1>
          <a href="">Create Notes</a>
          <a href="">My Notes</a>
        </ul>
      </nav>
      <div class="CreatePageLogOut">
        <button class="Logout">Log Out</button>
      </div>
    </div>
    <div class="mainAddNotePage">
      <div class="secondAddNote">
        <h1>Create Notes</h1>
        <h5 style="font-size: large; margin-top: 1%;">Title</h5>
        <input type="text" id="AddNoteInpute" />
        <h5 style="font-size: large;margin-top: 1%;">Description</h5>
        <input type="text" id="AddNoteInpute" />
        <h5 style="font-size: large;margin-top: 1%;">Tag</h5>
        <input type="text" id="AddNoteInpute" />
        <div>
          <button class="AddNoteButton">Add Notes</button>
        </div>
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

`

下面是CSS代码：- `

*{
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}


.Navbar{
    background-color: rgb(28, 28, 172);
    height: 8vh;
    display: flex;
    
}

nav ul{
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 8vh;
    width: 25vw;
    color: white;
}

a{
    color: white;
    text-decoration: none;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.CreatePageLogOut{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 70vw;
}

.Logout{
    height: 5vh;
    width: 8vw;
    background-color: rgb(239, 56, 56);
    color: white;
    border: solid rgb(171, 163, 249);
    border-radius: 8%;
    cursor: pointer;
}


.mainAddNotePage{
    height: 80vh;
    width: 100vw;
    display: grid;
    justify-content: center;
    align-items: center;
}

#AddNoteInpute{
    height: 8vh;
    width: 25vw;
}

.AddNoteButton{
    height: 8vh;
    width: 20vh;
    color: white;
    background-color: rgb(52, 52, 245);
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-weight: bold;
}

`

当我打开检查时，我的视口高度会改变，当我在手机中打开网站并点击输入键盘时，输入元素的视口高度会改变......请帮我解决问题...

HTML CSS 响应式设计 视口 viewport-units

评论

答：

0赞 Shivangam Soni 11/24/2022 #1

这是因为 & 是相对于视口的单位。vhvw

vh表示当您说它表示视口高度的 10% 时，该元素将使用相当于浏览器视口高度 8% 的 Size 值。同样，表示 .所以，你得到的结果是完全正常的，不是问题。View-Port Height10vhvwView-Port Width

我建议您使用或&大多数尺寸。pxemrem

喜欢使用 for 是一个不错的选择，因为它看起来不错，可以覆盖 8% 的 View-Port，但不建议覆盖 8% 的 View-Port。在较小的设备中，它总是会引发问题。8vhnavinput

请从这里获取CSS长度参考

上一个：在 dektop 模式下，针对不同移动设备和不同浏览器的不同 html 元素的字体

下一个：有没有办法找到 div 的大小和宽度的比率