I'm trying to understand how this tool figures out the 2nd parameter for the clamp() function: https://fluid-typography.netlify.app/. Is anyone able to explain that part?
I understand the 1st and 3rd parameters as they are pretty self-explanatory. It's the 2nd parameter that's confusing.
Minimum size 1.5rem at a viewport width of 700px.
Maximum size 3rem at a viewport width of 1000px.
font-size: clamp(1.5rem, 8vw - 2rem, 3rem);
The formula is font-size = Xvw - Yrem. At 700px of viewport (100vw = 700px so 1vw = 7px) we want 1.5rem (1.5rem = 24px) and at 1000px (100vw = 1000px so 1vw = 10px) we want 3rem (3rem = 48px) so:
24px = X*7px - Y*16px
48px = X*10px - Y*16px
Solve the equation and you will get X = 8 and Y = 2
You have a linear function to define the font-size between 700px and 1000px. Outside of this range we want the font-size to be fixed that's why we use clamp() to have a min and max value
font-size: clamp(1.5rem, 8vw - 2rem, 3rem);
As you say, the first and third parameters are fairly simple, as they both just use the rem unit. But the middle parameter is the result of a calculation, finding the difference between two values with different units.
8vw means 8% of the viewport width. 2rem means twice the font size of the root element. So, 8vw - 2rem means 8% of the viewport minus twice the font size of the root element. Because values in rem will stay the same (barring any #media directives in CSS changing the font size of the root element), but vw units scale with the size of the viewport, this means the result of that middle parameter will scale with the size of the viewport.
It's the 8vw part that's important, since that's the part that scales with viewport width. The - 2rem part of that middle parameter is really just an offset to get things looking as desired at any particular viewport.
When used with clamp(), the resulting value will never be smaller than 1.5rem, and it will never be larger than 3rem, but aside from those restrictions it will be 8vw - 2rem whenever it can.
Related
While specifying a percentage value in css calc, how does calc know whether I am referring to width or height?
.container {
width: calc(100% - 2vw); // 100% here is width or height ?
}
One may assume that it is either width or height depending on the property you are accessing, (width in this case). If that were the case, what happens if you would like to do some calculation based on a different property? For instance, set the width based on some calculation of height? Say, set the container width to be 1.5 times height?
From the specification
The computed value of a calc() expression is the expression with all components computed.
Where percentages are not resolved at computed-value time, they are not resolved in calc() expressions, e.g. calc(100% - 100% + 1em) resolves to calc(1em + 0%), not to 1em. If there are special rules for computing percentages in a value (e.g. the height property), they apply whenever a calc() expression contains percentages.
There is no magic when using percentage inside calc() they will simply behave as if you aren't using calc().
So using width:100% is exactly the same as width:calc(100%) which is also the same as calc(50% + 50%). when you add another unit like width:calc(100% - 2em) it's like calculating width:100% then you remove 2em from it.
Basically, calc() is useful when combining percentage and non-percentage value in order to have accurate and precise result like removing 10px from 50% of the total width by using width:calc(50% - 10px).
what happens if you would like to do some calculation based on a different property? For instance, set the width based on some calculation of height?
You cannot do such thing with calc(). CSS in general doesn't allow such thing. You can either consider JS, some hacks to preserve ratio between width/height or use CSS variable and assign the same value for different properties.
Related question where the use of calc() combined with CSS variable is missused: Calc() outputting unexpected value
To answer the second part of the question:
For instance, set the width based on some calculation of height? Say, set the container width to be 1.5 times height?
You can do this with the aspect-ratio property:
.container {
text-align: center;
height: 200px;
/* width / height ratio */
aspect-ratio: 1 / 1.5;
background: lightgray;
}
<div class="container">
some content
</div>
working on a class project, and something has our whole class, including our teacher, stumped. We're making a calculator out of html, css and javascript. The problem involves CSS. We have set the calculator to height: 50vmin and width: 50vmin.
We then set font-size to 5vmin, expecting it to be 10% of the container height. Instead, the font size is coming out to be around 11-12% or more of the height. For example, on my screen, the container is 323.5 px and the font-size is 37.981px. This does not include the padding or margin: it is the font-size itself. Does anyone know why the font is not coming out 10%? With 5 rows of buttons, plus margins and padding, it makes quite a difference.
Thanks!
font-size: 10vh;
1vh = 1% of viewport height
Definition says 1vw = 1% of viewport width. But I don't get it what does it mean when used with font-size? For instance what does it mean if I set:
h1 {
font-size: 10vw;
}
I thought that if I have h1 with 10 characters it would take 100% of viewport, but it does not.
Font-size refers to the vertical size of the font not character width
See the demo below for how they react differently.
h1 {
font-size: 10vw;
}
h1:nth-of-type(2) {
font-size: 10vh;
}
<h1>MY HEADER</h1>
<h1>MY HEADER</h1>
JSfiddle Demo
As Paulie_D stated:
Font-size refers to the vertical size of the font not character width.
If you're looking for the width of the character, you might want to look at font-weight (for the thickness of a character) or font-kerning (for the spacing between characters).
the vw unit is based on the width of the viewport.
1vw is 1% of the browser viewport width. (vh is the corresponding value for height)
This means if the viewport is 600px wide then 10vw is 60px and that's how high your font will be
It also means that dimensions, including heights, can be set relative to the width of the screen, which is very useful for maintaining aspect ratios. This means your font size will respond to the size of the viewport, something which you can't do with a font any other way
It's not supported in all cases, so it's good to provide a pixel fallback, like this:
height: 100px; /* over-ridden if vw can be interpreted */
height: 10vw; /* ignored if not understood */
I want a single form of my website to follow a simple rule: the page must appear identical at every resolution you watch.
So I need h1 be height, e.g., 10% of page, h2 be 7%, etc..
Is there a way to realize this with CSS?
Well, as a pure CSS solution you could use vh Viewport-percentage lengths for elements to specify their font-size/line-height base on the viewport height:
EXAMPLE HERE
h1 { font-size: 10vh; line-height: 10vh; }
h2 { font-size: 7vh; line-height: 7vh; }
5.1.2 Viewport-percentage lengths: the vw, vh, vmin, vmax units
The viewport-percentage lengths are relative to the size of the
initial containing block. When the height or width of the initial
containing block is changed, they are scaled accordingly. However,
when the value of overflow on the root element is auto, any scroll
bars are assumed not to exist. Note that the initial containing
block’s size is affected by the presence of scrollbars on the
viewport.
vh unit
Equal to 1% of the height of the initial containing block.
It's worth noting that vh unit is supported in the modern web browsers (including IE9+).
What is the meaning of '2em 10px' in css property value?
Example: margin: 1em 40px;
margin accepts one to four arguments:
One single value applies to all four sides.
Two values apply first to top and bottom, the second one to left and right.
Three values apply first to top, second to left and right and third to bottom.
Four values apply to top, right, bottom and left in that order (clockwise).
you can read the detail here
https://developer.mozilla.org/en-US/docs/Web/CSS/margin
1em is for top and bottom margin
40px is for left and right margin
1em is equal to the current font size
it could also be written like
margin-top: 1em;
margin-right: 40px;
margin-bottom: 1em;
margin-left: 40px;
or even another way like
margin: 1em 40px 1em 40px;
so if the current font size is 24px then the margin would be the same as
margin: 24px 40px;
but lets say the computer user zooms in on their screen 200% then the margin would be
margin: 48px 40px;
According to W3 Org, units definition, "em" is defined as
"The em is simply the font size. In an element with a 2in font, 1em thus means 2in. Expressing sizes, such as margins and paddings, in em means they are related to the font size, and if the user has a big font (e.g., on a big screen) or a small font (e.g., on a handheld device), the sizes will be in proportion. Declarations such as 'text-indent: 1.5em' and 'margin: 1em' are extremely common in CSS. "
while "px" is defined as:
"The px unit is the magic unit of CSS. It is not related to the current font and also not related to the absolute units. The px unit is defined to be small but visible, and such that a horizontal 1px wide line can be displayed with sharp edges (no anti-aliasing). What is sharp, small and visible depends on the device and the way it is used: do you hold it close to your eyes, like a mobile phone, at arms length, like a computer monitor, or somewhere in between, like a book? The px is thus not defined as a constant length, but as something that depends on the type of device and its typical use. "**strong text**