CSS视口单元：初学者指南-DEV365 开发者社区

````智能手机革命''仍处于早期阶段。

蒂姆·库克（Tim Cook）的声明今天不需要任何证据。要了解智能手机革命，我们不需要回去几十年。分析前五年的数据可以清楚地了解。不仅智能手机，而且在我们周围的数字世界中的所有内容（或仅包含屏幕的产品）也在发展。例如，电视现在带有浏览器，可以打开任何网站。电子书阅读器的尺寸既不等于平板电脑也不等于移动设备。如果我们想打开一个网站，则最常见的选择如下：

Source

在这些表示的设备中，内容是相同的，这意味着后端代码几乎相似。屏幕尺寸和网站的表示形式（前端）。我们看到Web应用程序的可见区域是该设备的视口，并且在确定我们的网站在用户设备上的出现如何发挥着重要作用。这个小的指标非常重要，以至于CSS包括一堆涉及视口的新测量单元。

在有关CSS视口单元的本文中，让我们讨论各种问题及其在web development中的重要性。此外，我们将研究CSS中可用的各种测量单元，以根据CSS视口单元渲染网站。但是首先，让我们简要了解为什么CSS视口单元如此重要。

如果您是CSS的初学者？最好的CSS cheat sheet可以在这里找到。

什么是视口？

将CSS视口单元带入图片之前，让我们首先了解视口的含义。视口是当前在设备上可见的区域。例如，由于您当前在阅读时可见此行，因此它属于视口部分。在此页面的末尾是“ ”示例 按钮，您可能看不到。因此，到目前

这是否意味着视口尺寸是我们设备屏幕尺寸当前的任何内容？简短的JavaScript代码将使我们能够验证：

<!DOCTYPE HTML>
<head>
  <title>Viewport Calculation</title>
  <script>
  window.onload = function() {
    var vp_width = window.innerWidth;
    document.getElementById("viewport_width").innerHTML = vp_width;
};
  </script>
</head>
<body>
  <br><br>
    <center>
        <h1> Viewport Width is <span><h1 id = "viewport_width" style = "color: red"></h1></span></h1>
    </center>
</body>
</html>

在桌面浏览器上运行此代码，您将看到以下结果：

我已经使用LambdaTest cloud platform在我选择的设备规范上渲染该网站。您可能会从左工具面板中观察到，在渲染网页之前选择的屏幕分辨率为1366ã768。网页上表示相同的数字。

向下滚动窗口，然后重新加载页面检查新的CSS视口单元。

综合 UI testing 教程，涵盖了UI测试的内容，其重要性，好处以及如何使用实时示例执行它。

CSS视口单元编号更改了，因为用户可以看到较小的面积。这表明，当我们谈论CSS视口单元时，我们通常会谈论用户可见的网站区域，而不是屏幕的宽度。该视口通常称为 布局视口 。

如果我们将此页面缩小到其原始大小的250％，该怎么办？您能猜出CSS视口单元结果吗？

CSS视口单元在不滚动窗口的情况下更改。因此，这样一来，我们在谈论视口时就解决了两个简单的观点：

设备的屏幕宽度并不意味着它是我们网站的事实视图。
设备的浏览器宽度并不意味着它是我们网站的事实视图。

如果您观察到上述代码，您会注意到我们利用以下JS功能来渲染网页：

window.innerHeight

与此相反，我们也有

window.outerHeight

要了解其实现，请在以下代码中重写脚本标签：

<script>
  window.onload = function() {
    var vp_width = window.outerWidth;
    document.getElementById("viewport_width").innerHTML = vp_width;
};
</script>

现在将此网页渲染在您的浏览器上，并将其放大到250％。观察最终结果：

它仍然显示出与100％相同的宽度。这是因为当我们选择windows.outerWidth时，它也考虑了浏览器边界，同时考虑CSS视口单元大小。由于缩小网页时浏览器屏幕保持恒定，因此我们获得了相同的数字。

在对这两个功能的介绍中，我们可以记住，如果我们将视口作为开发人员或测试人员打交道，我们正在考虑 innerwidth ，因为它为我们提供了一个准确的想法。

在本教程中，关于 Agile testing ，让我们深入研究敏捷测试的历史，其优势，缺点，方法，象限和最佳实践。

窗口的浏览器兼容性.innerwidth

函数窗口。在每个浏览器中都从非常早期版本中支持innerwidth。

忽略视口测试时常见问题

在web development的最初几天，人们在开发周期中并不担心CSS视口单元。其背后的原因是卖给客户的个人计算机的标准屏幕大小。但是随着移动设备responsive designs的兴起，开发人员不仅被迫查看其网页在不同的设备上的外观，而且是网页与与视口有关的用户操作的反应。

。

根据屏幕拟合内容

没有对CSS视口单元的任何特别关注，该网站可能看起来像左侧的图像，而看起来应该像右图所示的图像：

Source

这可以通过仅添加一条元线来管理：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

但是，对于每个浏览器，这条线还不够。它只是按照视口宽度来缩放元素。提前讨论的用例可能不会被此纠正。

根据屏幕调整图像

背景图像在我们在带有不同屏幕的设备上渲染相同的网页时会创建设计问题。例如，此图像显示在1366宽度的大屏幕笔记本电脑上，看起来很完美。

，虽然我在移动设备上呈现相同的网页，但我会得到以下结果：

这不是我们期望的行为。预期的行为是用我们在较大屏幕上看到的图像覆盖完整的页面。

测试您的 Puppeteer testing 在线脚本。通过使用Lambdatest Cloud进行超过3000多个浏览器和操作系统组合，通过运行自动检查来更快地部署质量构建。免费尝试。

中心元素问题

将元素集中在不同的浏览器上是您可能遇到的另一个问题，如果您尚未测试与视口有关的问题。在开发过程中完美居中的元素可能很容易在较小或较大的设备上丢失其坐标。

例如，如果我在网页上绘制一个小div框并中心，则看起来还不错：

相同的网页看起来如下iphone12：

没错！它远离视口。如果我使用LT Browser上的旋转屏幕旋转屏幕，则可以看到盒子，但很大程度上不超过比例：

我同意，有一些安排可以将盒子保存在视口内，但是当前的重点始终是将其保持在中心。另外，也许我们可以根据视口重新列出盒子的尺寸。此任务需要明确的CSS视口单元测试。

订阅我们的LambdaTest YouTube Channel，并在Selenium testing，Cypress E2E testing，Playwright testing等周围的最新教程中保持更新。

标题适合问题

开发人员很难在Web应用程序中更改显示许多内容的标题，例如此网站。问题是，当网页在带有较小屏幕的设备上渲染时，标题会根据视口进行调整，其下面的所有内容也是如此。

例如，以下是标题在博客/报纸网页上的外观：

用于此网页的代码：

<!DOCTYPE HTML>
<head>
  <title>Viewport Calculation</title>
  <style>
      #headline {
        font-size: 110px;
      }
  </style>
</head>
<body style="background-color: #abcdef;">
<br>
<p id = "headline">This is my headline element</p>
</body>
</html>

这将如下如下所示

作为开发人员，我认为没有其他开发人员希望在用户手机上渲染这种渲染。对于更长的头条而言，这变得更糟。

了解视口单元

上面部分讨论的问题或多或少地集中在视口（或简单的设备屏幕）调整大小时错误调整元素的大小。这并不是一个罕见的问题，当市场淹没了可以掌握在我们手中的设备时，数以百万计的开发商遭受了损失。结果，CSS视口单元贡献者和开发人员已将较新的单元系统纳入了与观察口相关的事物。这些单元称为视口单元，构成以下内容：

vw
vh
vmi
vmafm

Vh'视口高

vh 单元称为视口高，指的是视口的高度。这里有1VH表示视口高的1％。随后，NVH表示视口高的n％。

有了这些信息，我们几乎可以调整标题元素问题，并根据设备尺寸向用户介绍标题。对于较小的屏幕，标题字体大小应自动调整并给人类似的感觉。

使用的代码：

<!DOCTYPE HTML>
<head>
  <title>Viewport Calculation</title>
  <style>
      #headline {
        font-size: 5vh;
      }

      #headline_box {
        height: 50vh;
        width: 100vw;
      }
  </style>
</head>
<body style="background-color: #abcdef;">
<br>
<div id = "heading_box">
<p id = "headline">This is my headline element. It is representing the headline for the day.</p>
</div>
</body>
</html>

桌面渲染：

移动渲染：

如所见，字体尺寸会自动调整，并且在移动设备上的肖像以及景观元素上看起来很完美。

在本单元中，不假定存在，因此从计算中排除了。

在此 XCUITest 教程中，了解Xcuitest框架及其对移动自动化测试的好处。看看Xcuitest的工作原理，看看如何使用它来测试您的移动应用程序。

vw的视口宽度

在另一个维度上工作的类似单元是视口宽度，该宽度称为“ vw ”。与VH相似，单位大众是指 1％的视口宽度。这意味着50VW的值将对应于屏幕宽度的一半。

当我们需要沿另一个元素的行中心时，使用vwâ是一个完美的用例。例如，在上面讨论的问题中，可以使用大众视口单元轻松解决圆圈问题的中心。

使用的代码：

<!DOCTYPE HTML>
<head>
  <title>Viewport Calculation</title>
  <style>
      #centering_rectangle {
        margin-left: 50vw;
        background-color: red;
        width: 5vw;
        height: 5vw;
      }
  </style>
</head>

<body style="background-color: #abcdef">
<div id ="centering_rectangle"></div>
</body>

</html>

在较大的笔记本电脑屏幕上输出：

在移动屏幕上：

请注意，本节中使用的代码还指大众的矩形尺寸。这是因为固定的尺寸可能只能将左边缘保留在适当的位置，并且矩形看起来似乎不在中心。如果只有一个CSS视口单元属性（如这里的左边边距）是您的设计问题，那么您可以在此处使用任何维度。

Vmin的视口最低

VMIN单元指的是视口最低概念。当我们使用VMIN单元时，它将检查视口高和视口宽度之间的绝对最小数字。然后将最终选定的数字应用于元素。

minimum(viewport height, viewport width)

5 Vmin的值将意味着至少占视口宽度的5％和观察口高的5％。当您必须参考另一个元素时，使用VMIN很方便。例如，在此图像中，中心是关于外红色矩形的。

Source

此图像显示了三个矩形，全部以不同的形状。在这里，第一个处于肖像模式，因此我们需要考虑距左右相等的距离，这比顶部和底部少。如果我们按照宽度进行半径，则在启用景观模式时，它将取消比例，如第二个矩形所示。

。

第三个矩形是一个正方形，因此任何VH或大众都可以使用。但是，VMIN帮助我们涵盖这里的所有情况。

VMAX最大视口

VMIN单元对应于对应于视口最大值的VMAX单元。在这里，最大视口高和视口宽度被认为是实施的最终指标。

maximum(viewport height, viewport width)

如果开发人员写入5Vmax，则最终选定值是视口宽度的最大5％和观看端口高度的5％。当我们需要引用视口高度（例如标题字体尺寸）时，此视口单元就派上用场。如果用户旋转屏幕，我们希望标题变得更大一些，我们可以在视口高度应用字体大小。

在Web开发中，开发人员还可以实施calc() function并根据情况计算价值。它也可以与视口单元一起使用。 CANC功能的完整指南可以帮助您启动相同的概念，并确定关键差异以及如何将视口与它混合以在元素中进行更好的设计。

开始使用此完整的 selenium guide 自动化测试教程。了解自动跨浏览器测试的硒，其体系结构，优势等。阅读更多。

浏览器支持视口单元

视口单元是开发人员的流行选择，并在所有主要浏览器中得到支持，包括其移动版本。

Source

其全球用法为98.18％。

百分比和CSS视口单元之间的差异

我经常在社区渠道上发现的一个常见问题是百分比单位和视口单元之间的混乱。简单地说，是以下代码：


height: 100%;

和此代码：

height: 100vh;

他们的工作类似？由于100％确实使它感觉像100％的屏幕尺寸，就像100VH一样，因此在Web开发过程中弹出这个问题是很自然的。但是在回答之前，让我们用两个不同的代码将这两个单元付诸实践。

以下代码将100％的背景图像置于：

<!DOCTYPE HTML>
<head>
  <title>Viewport Calculation</title>
  <style>
      #centering_rectangle {
        margin-left: 30vw;
        width: 25vw;
        height: 15vw;
      }

      #child_div {
        background-image: url('background-photo.jpeg');
        width:  100%;
        height: 100%;
        background-size: cover;
      }
  </style>
</head>
<body style="background-color: #abcdef">
<div id = "centering_rectangle">
  <div id = "child_div">
  </div>
</div>
</body>
</html>

结果：

代码直通：

在上面的代码中，我们制作一个DIV框并将其高度和宽度定义为15VW和25VW。然后，我们制作另一个儿童div盒，并以100％宽度和100％的高度应用其背景图像。

现在，让我们对DIV线进行略有更改，并将百分比值更改为大众和VH，如下所示：

#child_div {
        background-image: url('background-photo.jpeg');
        width:  100vw;
        height: 100vh;
        background-size: cover;
      }

您可以将所有其他元素保持与上述代码相同。

结果：

此图像也向右延伸。因此，随着单位更改，我们看到了巨大的差异。这里要注意的基本问题是孩子Div如何看待对父级的值。当单元以百分比项定义时，它与其母元素相对应的百分比值。如果父母div不存在，则100％和100VH的意思是同一件事。

另一方面，当我们以视口术语编写单元时，该元素是否有父母都没有关系。正如我们在整个帖子中所看到的那样，计算是在固定的视口号上完成的。但是，儿童div的起始位置完全取决于其父母。因此，我们看到图像从父元素的左上元素开始。

除了百分比术语外，有助于响应设计的另一个重新缩放功能是媒体查询。但是，在这篇文章中详细讨论它们是不可行的。请参阅我们关于CSS media queries的完整指南，并提供示例以获取更好的视图。

retesting 的完整教程，阐明了其特征，重要性，优点和缺点以及如何执行。

在多个浏览器上测试您的视口单元

在这篇文章中，我使用不同的浏览器在不同情况下渲染网站，以提出一致的输出。但是，所有这些浏览器均未安装在我的系统上，当市场上有很多版本和浏览器时，它会变得很累。但是，作为开发人员，我们可能会冒着任何一个风险，并且需要对其进行测试，然后再将其释放到最终用户。这可以通过像Lambdatest这样的在线cross browser testing平台来完成。

我们可以在3000多个真实浏览器，操作系统和设备（包括智能手机，平板电脑和台式机）的web testing上进行web testing。这使我们能够在许多操作系统和浏览器中进行test a website’s responsiveness。

通过实时测试，我可以在其基础架构上选择任何浏览器和版本，并在几秒钟内渲染网站，而无需安装任何内容。在此类平台方面，一个浏览器和Internet连接就足够了。要执行实时测试，请执行以下步骤：

步骤1：登录到您的lambdatest帐户。 Sign up for free如果您没有帐户。

步骤2：单击实时测试>浏览器测试从左图中的选项。

步骤3：输入要渲染的URL，选择桌面/移动设备，选择浏览器，浏览器版本， os ， 分辨率，然后按开始。

如果您的网站当前未发布，则可以使用LambdaTest’s local tunnel功能来利用其连接到本地服务器的基础架构。

满足您的响应式测试需求，Lambdatest平台还提供LT浏览器，mobile-friendly tester tool，用于测试网站，以跨移动，平板电脑，台式机和笔记本电脑的不同视口提供响应。

对于任何特定查询，您可以联系可用的支持部分24â

包裹起来

该设备的视口已经开始在网站开发和移动制造中扮演主流角色。随着响应式设计攀升优先级的排名，观察视口观察变化很重要。 CSS的开发人员和贡献者已经考虑过，最后认为仅百分比和EM符号是不够的。您可能会围绕它们工作，但是在将来的移动版本中它仍然变得艰难，并且不会防止失败。

当您只需要根据视口维度渲染元素时，视口单元就是一种方法。这些单元是VH，VW，VMAX和VMIN。这篇文章讨论了他们的实施，重要性以及为什么视图单位是更好的选择。此外，我们查看了您错误地实现视口单元而不是百分比时可能会看到的差异。有了这个小的摘要，我希望您可以总结我们上面讨论的所有实现。对于任何评论或建议，请在评论部分中告诉我们。谢谢你的宝贵时间。