简体   繁体   English

这个 CSS 代码如何/为什么使我的文本具有响应性?

[英]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

  1. I don't understand how 4rem + 1vw works (what exactly is it doing).我不明白4rem + 1vw是如何工作的(它到底在做什么)。
  2. I don't understand how 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.首先, remvw工作方式相同,但引用不同。 You have to see rem and vw as pretty much just other metrics.您必须将remvw视为几乎其他指标。

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".作为最后一个信息,因为可能不清楚:您不需要calc4rem来使您的字体大小“响应”。 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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM