CSS中windows单元和百分比单元使用的详细说明

本文主要介绍CSS中的窗口单元和百分比单元，这是CSS学习的基础知识。
视窗（视口）单元

视窗（视窗）单元是相对单位，意思是它们没有客观尺寸。它们的大小取决于窗口（视窗）的大小。下面是与视口相关的四个单元。
我将集中在前两个单元，因为它们更有可能被使用。

在许多情况下，视口单元（VH和大众）和单元的百分比可以在它们的函数重叠中实现，但是它们都有明显的优缺点，

当宽度被处理时，%单元更合适。当处理高度时，VH单元更好。

元素的宽度：%

正如我所提到的，大众汽车单位根据窗口的宽度决定它的大小。然而，浏览器根据浏览器的窗口计算窗口的大小，包括滚动条的空间。
如果在页面的高度超出视口mdash；mdash；mdash；滚动条；窗口的宽度将大于HTML元素的宽度。

视图> HTML >正文

因此，如果你设置一个元素100vw，此元素将超出HTML和身体的元素。在这个例子中，我把HTML元素与红色的边框，然后设置背景颜色的部分元素。
由于这个细微的差别，当页面宽度的一个元素时，最好使用单位的百分比而不是视口的宽度。
高水平的元素：VH > %

另一方面，当元素在整个页面的高度上进行时，VH远远好于百分比单位。

因为由百分比定义的元素的大小由其父元素决定。只有当父元素填充屏幕的高度时，才能有一个填充整个屏幕的高度元素，这通常意味着我们必须修复固定的元素，以便使元素的父元素成为HTML元素，或者依赖某些程序。

然而，与VH，它只是如下简单：

CSS代码将内容复制到剪贴板。
{。例
Height: 100vh;
}

无论怎样。例子元素嵌套，可以设置大小相对的窗口大小，滚动条的问题都不是问题，因为大多数的页面通常没有水平滚动条现在。

下面是一些例子，我们可以使用VH单位创造一些设计容易。
全屏背景图片

一个典型的使用VH单位是创建一个背景图片在整个屏幕的高度和宽度，无论大小的设备。这是很容易实现与VH：

CSS代码将内容复制到剪贴板。
{。BG
职位：相对；
背景：URL（'bg .webp）中心/覆盖；
宽度：100%；
身高：100vh；
}

全屏内容块像多页面一样

同样，我们也可以实现一个多页面的效果；该块的每一个页面的内容横跨整个视口的高度和宽度。

CSS代码将内容复制到剪贴板。
部分{
宽度：100%；
身高：100vh；
}

我们可以用Javaｓｃｒｉｐｔ来实现页面的假象。

CSS代码将内容复制到剪贴板。
$（'nav '），（听到咔哒声，函数（））{

如果（$（this）。HasClass（Down））{
Var movePos = $(window).ScrollTop () + $(window).Height ();
}
如果（$（this）。HasClass（向上的））{
无功movepos = $（窗口），ScrollTop（）$（窗口）Height（）；
}

（'html美元，人体动画（{）。
ScrollTop：movepos
}，1000）；
}）

该地区的图片

VH单元也可以用来控制页面中图片的大小。例如，在一篇文章中，我们可能希望任何图片在页面上完全被看到，但是屏幕的大小是多的。

为了做到这一点，我们可以做到这一点：

CSS代码将内容复制到剪贴板。
{ IMG
宽度：自动/ 宽度根据高度缩放*
马克斯宽度：100%；图片不超过父元素的宽度。
马克斯身高：90vh； / *高度不超过视窗图片

保证金：2rem汽车；
}

浏览器支持

因为这些单位是比较新的，在一些浏览器中仍然存在一些问题。这里是如何解决这些问题mdash；mdash；