通过vh和vw调整css字体大小 [英] adjusting css font size by vh and vw

问题描述

所以我有一些要根据其容器大小自动调整大小的文本.但是，如果我使用类似的东西

So I have text that I want to automatically resize based on the size of its container. However if I use something like

font-size: 5vw;

看起来不错，但是当我缩小页面时，高度开始变得太小

it looks good, but when I shrink the page the height starts getting way too small

无论如何，我是否可以同时基于vh和vw调整文本的大小，例如，如果我只是减小页面的宽度，高度也不会减小?

Is there anyway that I can resize the text based on both vh and vw so, for example, if I just decrease the width of the page the height doesn't decrease too?

就像我只减小页面的宽度一样，我希望文本的高度保持不变，反之亦然.

like if I only decrease the width of the page, I want the height of the text to stay the same and vice versa.

基本上我希望无论页面/容器的大小如何，文本都始终能够完美地放置在框中并具有相同的比例?

Basically I want the text to always fit inside the box perfectly and have same proportions no matter what the size of the page/container is?

是否在CSS/HTML中像这样在vh和vw上都设置了字体大小?

Is there anyway to base font size on both vh and vw like this in CSS/HTML?

推荐答案

您可以查看vmin和vmax单元.

1vw将返回视口宽度的1％，而1vh将返回视口高度的1％，1vmin将返回最小视口尺寸的1％，无论是视口宽度()或其高度(vh).同样，1vmax将返回最大视口尺寸的1％.

While 1vw will return 1% of the viewport width and 1vh will return 1% of the viewport height, 1vmin will return 1% of the smallest viewport dimension, be it either the viewport width (vw) or its height (vh). Equally 1vmax will return 1% of whichever viewport dimension is the largest.

要使整个容器(包括其文本)保持其长宽比，您必须对容器尺寸及其字体大小应用相同的单位.

In order to have a whole container, including its text, to retain its aspect ratio you will have to apply the same kind of unit to both the container dimensions and its font size.

在整页模式下查看以下示例，并使用窗口的宽度和高度:

See the following example in full page mode and play around with the window width and height:

p {
  width: 80vmin;
  font-size: 6vmin;
}

<p>Try resizing both the width and height of the output frame. The &lt;p&gt; element and its contents will both respond to whichever dimension is the smallest.</p>

注意

Internet Explorer 11和Edge 12不支持vmax单元.有关浏览器支持的更多信息，请此处.

Internet Explorer 11 and Edge 12 does not support the vmax unit. More on browser support here.

这篇关于通过vh和vw调整css字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！