css快速入门_CSS视口单位：快速入门

css快速入门

It’s been a few years since viewport units were first introduced in CSS. They’re truly “responsive length units” in the sense that their value changes every time the browser resizes. If you’ve heard about these units before but never learned about them in detail, this article can help you out.

自从在CSS中首次引入视口单元以来已有好几年了。 在每次浏览器调整大小时，它们的值都会改变，因此它们是真正的“响应长度单位”。 如果您以前曾听说过这些单元，但从未详细了解它们，那么本文可以为您提供帮助。

单位及其意义 (The Units and Their Meaning)

There are four viewport-based units in CSS. These are vh, vw, vmin and vmax.

CSS中有四个基于视口的单元。 它们是vh ， vw ， vmin和vmax 。

• Viewport Height (vh). This unit is based on the height of the viewport. A value of 1vh is equal to 1% of the viewport height.

  视口高度 (vh)。 该单位基于视口的高度。 1vh值等于视口高度的1％。

• Viewport Width (vw). This unit is based on the width of the viewport. A value of 1vw is equal to 1% of the viewport width.

  视口宽度 (vw)。 该单位基于视口的宽度。 1vw值等于视口宽度的1％。

• Viewport Minimum (vmin). This unit is based on the smaller dimension of the viewport. If the viewport height is smaller than the width, the value of 1vmin will be equal to 1% of the viewport height. Similarly, if the viewport width is smaller than the height, the value of 1vmin will be equal to 1% of the viewport width.

  最小视口 (vmin)。 此单位基于视口的较小尺寸 。 如果视口高度小于宽度，则1vmin的值将等于视口高度的1％。 同样，如果视口宽度小于高度，则1vmin的值将等于视口宽度的1％。

• Viewport Maximum (vmax). This unit is based on the larger dimension of the viewport. If the viewport height is larger than the width, the value of 1vmax will be equal to 1% of viewport height. Similarly, if the viewport width is larger than the height, the value of 1vmax will be equal to 1% of hte viewport width.

  最大视口 (vmax)。 此单位基于视口的较大尺寸 。 如果视口高度大于宽度，则1vmax的值将等于视口高度的1％。 同样，如果视口宽度大于高度，则1vmax的值将等于视口宽度的1％。

Let’s see what the value of these units will be in different situations:

让我们看看这些单位在不同情况下的价值：

• If the viewport is 1200px wide and 1000px high, the value of 10vw will be 120px and the value of 10vh will be 100px. Since the width of the viewport is greater than its height, the value of 10vmax will be 120px and the value of 10vmin will be 100px.

  如果视口是1200像素宽，1000像素高，价值10vw将是120像素的值10vh将是100像素。 由于视口的宽度大于其高度，因此10vmax的值为120px， 10vmin的值为100px。

• If the device is now rotated so that the viewport becomes 1000px wide and 1200px high, the value of 10vh will be 120px and the value of 10vw will be 100px. Interestingly, the value of 10vmax will still be 120px because it will now be determined based on the height of the viewport. Similarly, the value of 10vmin will still be 100px.

  如果现在旋转设备，以使视口变为1000px宽和1200px高，则10vh的值为120px， 10vw的值为100px。 有趣的是， 10vmax的值仍将是120px，因为它现在将基于视口的高度确定。 同样， 10vmin的值仍为100px。

• If you resize the browser window so that the viewport becomes 1000px wide and 800px high, the value of 10vh will become 80px and the value of 10vw will become 100px. Similarly, the value of 10vmax will become 100px and the value of 10vmin will become 80px.

  如果调整浏览器窗口，使视成为1000像素宽800像素高，价值10vh将成为80px和价值10vw将成为100像素。 同样， 10vmax的值将变为100px，而10vmin的值将变为80px。

At this point, viewport units may sound similar to percentages. However, they’re very different. In the case of percentages, the width or height of the child element is determined with respect to its parent. Here’s an example:

此时，视口单位听起来可能与百分比相似。 但是，它们有很大的不同。 对于百分比，子元素的宽度或高度是相对于其父元素确定的。 这是一个例子：

See the Pen Viewport Units and Percentage by SitePoint (@SitePoint) on CodePen.

请参见CodePen上的Pen Viewport单位和按SitePoint( @SitePoint )的百分比 。

As you can see, the width of the first child element is set to be equal to 80% of its parent’s width. However, the second child element has a width of 80vw, which makes it wider than its parent.

如您所见，第一个子元素的宽度设置为等于其父元素宽度的80％。 但是，第二个子元素的宽度为80vw，使其比其父元素宽。

视口单元的应用 (Applications of Viewport Units)

Since these units are based on viewport dimensions, it’s very convenient to use them in situations where the width, height or size of elements needs to be set relative to the viewport.

由于这些单位基于视口尺寸，因此在需要相对于视口设置元素的宽度，高度或尺寸的情况下使用它们非常方便。

全屏背景图像或部分 (Fullscreen Background Images or Sections)

It’s very common to set background images on elements that fully cover the screen. Similarly, you may want to design a website where each individual section about a product or service has to cover the entire screen. In such cases, you can set the width of the respective elements to be equal to 100% and set their height equal to 100vh.

在完全覆盖屏幕的元素上设置背景图像是很常见的。 同样，您可能想要设计一个网站，其中有关产品或服务的每个单独部分都必须覆盖整个屏幕。 在这种情况下，您可以将各个元素的宽度设置为等于100％，并将其高度设置为等于100vh。

As an example, take the following HTML:

例如，使用以下HTML：

<div class="fullscreen a">
  <p>a<p>
</div>

You can achieve a fullwidth background image section using the CSS below:

您可以使用以下CSS实现全角背景图片部分：

.fullscreen {
  width: 100%;
  height: 100vh;
  padding: 40vh;
}

.a {
  background: url('path/to/image.jpg') center/cover;
}

See the Pen Fullscreen Sections by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )的笔全屏显示部分 。

Both the first and second image are taken from Pixabay.

第一 张图片和第二张图片均来自Pixabay。

创建完美契合的标题 (Create Perfectly Fitting Headlines)

The FitText jQuery plugin can be used to scale headlines in such a way that they take up all the width of the parent element. As we mentioned earlier, the value of viewport units changes directly based on the size of the viewport. This means that if you use viewport units to set the font-size for your headings, they’ll fit perfectly on the screen. Whenever the viewport width changes, the browser will also automatically scale the headline text appropriately. The only thing that you need to do is figure out the right initial value for the font-size in terms of viewport units.

FitText jQuery插件可用于缩放标题，使其占据父元素的所有宽度。 如前所述，视口单位的值直接根据视口的大小而变化。 这意味着，如果您使用视口单位来设置标题的font-size ，则它们将完美地适合屏幕。 每当视口宽度改变时，浏览器还将自动适当缩放标题文本。 您唯一需要做的就是根据视口单位找出正确的font-size初始值。

One major problem with setting font-size this way is that the size of the text will vary greatly depending on the viewport. For example, a font-size of 8vw will compute to about 96px for a viewport width of 1200px, 33px for a viewport width of 400px and 154px for a viewport width of 1920px. This can make the font either too large or too small for it to be properly readable. You can read more about properly sizing the text using a combination of units along with the the calc() function in this excellent article about viewport unit-based typography.

用这种方式设置font-size一个主要问题是， 文本的大小将根据视口而有很大的不同 。 例如，对于1200px的视口宽度， font-size为8vw将计算为大约96px，对于400px的视口宽度将计算为33px，对于1920px的视口宽度将计算为154px。 这会使字体太大或太小而无法正确阅读。 在这本有关基于视口的基于单位的排版的出色文章中，您可以了解有关使用单位组合以及calc()函数正确调整文本大小的更多信息。

See the Pen Perfectly Fitting text by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint ) 完美笔型文本 。

轻松居中 (Easily Center Your Elements)

Viewport units can be very helpful when you want to put an element exactly at the center of your user’s screen. If you know the element’s height, you just have to set the top and bottom value of the margin property to be equal to [(100 - height)/2]vh:

当您想将元素精确地放置在用户屏幕的中心时，视口单位会非常有用。 如果知道元素的高度，则只需将margin属性的顶部和底部值设置为等于[(100 - height)/2]vh ：

.centered {
  width: 60vw;
  height: 70vh;
  margin: 15vh auto;
}

See the Pen Easily Center Your Elements by SitePoint (@SitePoint) on CodePen.

在CodePen上，通过SitePoint( @SitePoint ) 轻松看到钢笔将元素 居中 。

However, nowadays we can use Flexbox or CSS Grid to center elements, both vertically and horizontally.

但是，如今，我们可以使用Flexbox或CSS网格在垂直和水平方向上居中放置元素。

注意事项 (Things to Keep in Mind)

If you decide to use viewport units in your projects, there are a few things you should keep in mind.

如果您决定在项目中使用视口单元，则需要牢记一些注意事项。

Be careful when setting the width of an element using viewport units. This is because when the overflow property on the root element is set to auto, the browsers will assume that the scrollbars don’t exist. This will make the elements slightly wider than you expect them to be. Consider markup with four div elements styled as follows:

使用视口单位设置元素的宽度时要小心。 这是因为当根元素上的overflow属性设置为auto ，浏览器将假定滚动条不存在。 这将使元素比您预期的要宽一些。 考虑具有四个样式如下的div元素的标记：

div {
  height: 50vh;
  width: 50vw;
  float: left;
}

Normally, you’d expect each div to occupy a quarter of the available screen. However, the width of each div is computed with the assumption that there is no scrollbar. This makes the div elements slightly wider than the required width for them to appear side by side.

通常，您希望每个div占据可用屏幕的四分之一。 但是，每个div的宽度是在没有滚动条的前提下计算的。 这使div元素略宽于并排显示所需的宽度。

See the Pen Scrollbars and vw by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )的Pen Scrollbars和vw 。

Setting the divs’ width from 50vw to 50% will solve this problem. The conclusion is that you should use percentages when setting width for block elements so that the scrollbars don’t interfere with the computation of their width.

将div的宽度设置为50vw至50%将解决此问题。 结论是， 在设置块元素的宽度时应使用百分比，以使滚动条不会干扰其宽度的计算。

A similar issue can also occur on mobile devices because of the address bar which may appear or disappear depending on whether the user is scrolling or not. This will change the viewport height and the user will notice sudden jumps when viewing the content.

由于地址栏可能会出现或消失，这取决于用户是否在滚动，在移动设备上也会发生类似的问题。 这将更改视口高度，并且用户在查看内容时会注意到突然的跳跃。

浏览器支持 (Browser Support)

Based on the data available on Caniuse, it seems that every major browser supports these units. However, there are still a few bugs and issues that you should be aware of when using viewport units. For example, in Firefox there’s a documented bug where 100vh has no effect on any element with its display property set to table. Again, Chrome doesn’t support viewport units for border widths, column gaps, transform values, box shadows or in calc() until version 34. Check out Caniuse for a full list of known bugs.

根据Caniuse上的可用数据，似乎每个主要的浏览器都支持这些单元。 但是，在使用视口单元时，仍然需要注意一些错误和问题。 例如，在Firefox中，有一个已记录的bug ，其中100vh的display属性设置为table对任何元素都没有影响。 同样，Chrome在版本34之前不支持视口单位的边框宽度，列间距，变换值，框阴影或calc() 。请查看Caniuse获取已知错误的完整列表。

结论 (Conclusion)

In this article, we’ve briefly covered the meaning, applications and browser support of viewport units. If you know about any other interesting application or browser issue in relation to these units, why not tell us about them in the forums.

在本文中，我们简要介绍了视口单元的含义，应用程序和浏览器支持。 如果您知道与这些单元有关的任何其他有趣的应用程序或浏览器问题，为什么不在论坛中向我们介绍它们。

Take your CSS skills to the next level with our book CSS Master, 2nd Edition by Tiffany B. Brown – covering CSS animations, transitions, transformations and much more.

蒂芙尼·布朗(Tiffany B. Brown)出版的第二版CSS Master，将您CSS技能提升到一个新的水平–涵盖CSS动画，过渡，转换等等。

翻译自: https://www.sitepoint.com/css-viewport-units-quick-start/

css快速入门