css vw单位

As page layouts become more complex, developers require access to a greater range of measurements to bring their designs to life. Beyond the standard percentage widths, r/ems and pixels we’re used to, the new vw and vh measurements (and their related brethren, vmin and vmax) provide more powerful ways of describing adaptive designs that can often eliminate reams of @media breakpoint interventions.

随着页面布局变得越来越复杂，开发人员需要访问更大范围的度量以使他们的设计栩栩如生。 除了我们惯用的标准百分比宽度， r/ems和像素之外，新的vw和vh测量值 (及其相关的brethren， vmin和vmax )还提供了更强大的描述自适应设计的方式，这些设计通常可以消除@media断点的数量干预。

超越百分比 (Getting Beyond Percentages)

Traditional CSS measurement systems create a few problems in web design:

传统CSS测量系统在Web设计中会产生一些问题：

• Percentage measurements don’t always work as expected. Developers always have to keep margins in mind when sizing elements. Trying to use % height on the body doesn’t work as designers think it should. font-size: 50% makes text half its normal size, rather than creating a dynamic relationship between the text and its container element.

  百分比测量并非总是能按预期进行。 在确定元素大小时，开发人员始终必须牢记利润。 尝试使用身体上的% height不起作用，这是设计师认为应该的。 font-size: 50%使文本变成其正常大小的一半 ，而不是在文本与其容器元素之间建立动态关系。

• It’s almost impossible to keep shapes perfect. Keeping an element perfectly square and responsive at the same time is very difficult.

  保持形状完美几乎是不可能的 。 保持一个元素完美的正方形并同时响应是非常困难的。

vw and vh go a fair way towards addressing all of these issues.

vw和vh去朝着解决所有这些问题一个公平的方式。

保持完美的节奏 (Keeping Perfect Rhythm)

It’s very easy to make “perfect” shapes on web pages using vw and vh. To do so, you have to appreciate that vw and vh can be used in almost any CSS property that can take a length measurement. Therefore, if you want an element that is always 20% of the screen width and remains square no matter what the window size, you can apply the same vw value to both its width and height:

使用vw和vh在网页上制作“完美”形状非常容易。 为此，您必须意识到vw和vh可以在几乎所有可以进行长度测量CSS属性中使用。 因此，如果您希望元素始终为屏幕宽度的20％， 并且无论窗口大小如何都保持正方形，则可以将相同的vw值应用于其width和height ：

div.twentysquare {background: #999;width: 20vw;height: 20vw;
}

(Try resizing the browser window to see the effect on the square).

(尝试调整浏览器窗口的大小以查看对正方形的影响)。

Using the same method, it would be easy to make a rectangle always be twice as high as it was wide, while scaling to the size of the browser window:

使用相同的方法，很容易使矩形始终是宽度的两倍，同时缩放到浏览器窗口的大小：

div.onetworect {width: 20vw; height: 40vw;
}

Sizing a banner to a “perfect” ratio in CSS would be as simple as:

在CSS中将横幅大小调整为“完美”比例将非常简单：

div.goldenrect {width: 100vw;height: 61.8vw;background: red;
}

Fitting "clamped" text inside a responsive box, always perfectly filling the space allotted to it with breaking into new lines would just be a matter of sizing the font in vw units.

在响应式框中放入“固定”文本，始终用新的行来完美填充分配给它的空间，这只是将字体设置为vw单位即可 。

翻译自: https://thenewcode.com/738/Create-Perfect-Responsive-Shapes-With-CSS-vw-Units

css vw单位