大家好，你今天好吗？我希望你一切都好！

今天，我想谈谈并分享与我和我的项目一起解决的问题以及如何解决！

，您可能已经在某些项目中做到了这一点，或者如果没有，请不要担心，我相信有一天您会遇到这种情况！

所以让我们了解场景并提高我们的知识！

ð§知道问题！

我已经在一个项目中工作了几个月，基本上该项目将是：

一个名为：“ DevTab Daily”的网站，它将向我们展示开发人员有关正在发生的事情的新闻，并且在诸如以下网站上搜索的首要任务：GitHub趋势，Dev.to，Awwwards和其他一些网站！您可能已经遇到了这样的网站，但是由于我喜欢总是通过Angular开发并进行练习项目，因此我喜欢这个想法，并且正在实施！

将来我会与您分享该项目，希望您喜欢它！

buuuut

在此项目中，仪表板屏幕上有带卡的标签列表，我希望它占据浏览器屏幕高度的100％，对吧？！

可能（喜欢我），您很快想到：

• 简单，我们只需要添加 100VH 测量，我们的问题得到了解决！而 100VH 是的100％“查看高度” ！

这就是我这样做的方式来制作我的布局，并在无花果上实现了它！正如我们在下面看到的那样

ð±chrome devtools：移动365x667

ð»Chrome Devtools：笔记本：1280x748

但是，当我使用模拟器打开DevTabdaily并使用我的手机开始时，您可以在下面看到应用程序在手机浏览器中打开的方式。如果您用图像查看最后一张卡，即使它具有属性 100VH 。

这是正常的行为，从浏览器到浏览器和手机类型也有所不同！

这样，我的应用程序的行为与我预期的不同，并导致了不良的用户体验！

soo，我们如何解决？

ð¼CSS视口

我们可以轻松地与我们的朋友 css 以及一些来自视图端口单位的属性！

，但首先，让我们了解它的工作原理并看到它们之间的区别，所以让我们理解：

• 小视口： SVH
• 大视口： lvh
• 动态视口： DVH

ð§©小视口：SVH

当浏览器尚未滚动并且UI条仍处于其默认状态（尚未隐藏）时，小视口表示。下面您可以看到图像表示：

ð如何使用它：

仅在高度 css属性中，我们需要使用 svh ：

.your-class {
  height: 100svh;
}

ð§©大型视口：LVH

LVH表示应用程序滚动后的视口的高度，并且通过降低其初始尺寸来修改地址栏UI。如下所示，您可以看到一个示例：

ð如何使用它：

仅在高度 CSS属性中，我们需要使用 lvh ：

.your-class {
  height: 100lvh;
}

ð§©动态视口：DVH

顾名思义，动态属性使高度行为 dynamic ，因此当浏览器栏时，行为将相同是否隐藏。如下面，您可以看到变化：

ð如何使用它：

仅在高度 CSS属性中，我们需要使用 dvh ：

.your-class {
  height: 100dvh;
}

酷吗？我们有一些不同的选择可以与查看端口仅使用 css ，但也许它们对我们开发人员不知道！

现在，让我们解决 devtab 应用程序问题！

ðð¥解决DevTab问题：

现在，我们知道解决浏览器栏重叠卡的应用程序问题的选项！

我想制作视口动态性，因为我不想担心浏览器所在的状态，例如：

是否已经滚动并隐藏了条！

对此，我将使用 dynamic 选项，它像charme一样工作，看看差异！

ð之前

之后

我将应用程序放在光模式下，以使您更容易看到行为的差异！

如果您查看图像，则在第一个图像中，卡片可能会叠加浏览器杆，给人以“破碎”的印象。

在下图中，您可以在浏览器栏上方看到卡的末端，占据整个查看屏幕并改善用户体验。

我希望您喜欢它，并且在这篇文章中，您现在在占用整个屏幕的事情时会有所不同！

任何问题，建议或其他任何内容，请评论！

交谈和交流知识/经验将是一种荣幸！

很快见你