[英]How/Why does this CSS code work in making my text responsive?
CSS in question:有问题的CSS:
font-size: calc(4rem + 1vw);
I somewhat understand that the calc
function makes my font dynamically sized.我有点理解
calc
函数使我的字体动态调整大小。 but但
4rem + 1vw
works (what exactly is it doing).4rem + 1vw
是如何工作的(它到底在做什么)。calc
interacts or affects 4rem + 1vw
calc
如何相互作用或影响4rem + 1vw
Break it down:分解一下:
font-size: calc(4rem + 1vw);
1vw
vw
is "equal to 1% of the width of the viewport's initial containing block". vw
是“等于视口初始包含块宽度的 1%”。 The browser can calculate that to a pixel value.浏览器可以将其计算为像素值。
4rem
rem
is relative to the font size of the HTML element. rem
相对于 HTML 元素的字体大小。 The browser can calculate that to a pixel value.浏览器可以将其计算为像素值。
So,所以,
calc(4rem + 1vw)
calc
adds those values together and sets the font-size
property to that value. calc
将这些值相加,并将font-size
属性设置为该值。
Now, I'm saying "pixel value" here, but it could be some intermediate value that has nothing to do with pixels per se, but the idea is the same.现在,我在这里说的是“像素值”,但它可能是一些与像素本身无关的中间值,但想法是一样的。
First of all, rem
and vw
work kinda the same, but not with the same references.首先,
rem
和vw
工作方式相同,但引用不同。 You have to see rem
and vw
as pretty much just other metrics.您必须将
rem
和vw
视为几乎其他指标。
rem
is based on your root html font-size. rem
基于您的根 html 字体大小。 Which means that as long as your html has a font-size of, let's say, 16px, 1rem will equal 16px.这意味着只要您的 html 的字体大小为 16px,1rem 就等于 16px。 If at any point, you change your html font-size, all the
rem
metrics of your css will adapt.如果在任何时候更改 html 字体大小,则 css 的所有
rem
指标都会适应。 It allows for a more uniform render on browsers with different default css values when it has not been set directly by the developer.当开发人员未直接设置时,它允许在具有不同默认 css 值的浏览器上进行更统一的渲染。 (For more infos, see reset.css )
(有关更多信息,请参阅reset.css )
So here, as long as you don't change your html font-size, 4rem = 64px.所以在这里,只要你不改变你的html font-size,4rem = 64px。
Now about vw
, it works pretty much like we described with rem, but it is based not on a fixed font-size anywhere, but on your window with.现在关于
vw
,它的工作原理与我们用 rem 描述的非常相似,但它不是基于任何地方的固定字体大小,而是基于您的窗口。 Which makes it based on a completely variable data.这使得它基于完全可变的数据。 You can see this variable like this: for a 1000px window, 1px = 0.1vw.
你可以像这样看到这个变量:对于 1000px 的窗口,1px = 0.1vw。 So 1vw is 1% of your window width.
所以 1vw 是窗口宽度的 1%。
So here, if your window width is 1000px, 1vw = 10px.所以在这里,如果你的窗口宽度是 1000px,那么 1vw = 10px。
The calc is literally just adding them: 64px + 10px.计算实际上只是将它们相加:64px + 10px。 At the end, with your code you will have a fixed
4rem
that will always have the same value as long as the html font-size stay the same, and a variable addition of 1vw that will depend on your browser width.最后,使用您的代码,您将拥有一个固定的
4rem
,只要 html font-size 保持不变,它就会始终具有相同的值,以及 1vw 的可变附加值,这将取决于您的浏览器宽度。
EDIT:编辑:
As a last info, because maybe it isn't clear: You don't need calc
or the 4rem
to make you font-size "responsive".作为最后一个信息,因为可能不清楚:您不需要
calc
或4rem
来使您的字体大小“响应”。 Try with font-size: 1vw
and it will also be responsive.尝试使用
font-size: 1vw
,它也会响应。 Your calc will just make the variation based on your device width a smaller part of your final font-size.您的计算只会使基于您的设备宽度的变化成为最终字体大小的较小部分。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.