DAY4: Getting resonsive with CALC(), CLAMP() Function

1. CALC() Function

calc() function lets you do basic arithmetic with two or more values.i.e. + - * /.

For example CALC

:root {
font-size: calc(0.5em + 1svw);
}
The 0.5em here operates as sort of minimum font size, and the 1svw adds a responsive scaler. This gives you a base font size from 11.75px on an iPhone Se up to 20 px 1200 px browser window.

2. CLAMP() Function

CLAMP Takes three arguemnents: a minimum value, a preferred value as an expression, and maximum valze.

For example

:root{
font-size: clamp(0.9rem, 0.6rem + 0.5svw, 1.7rem);
}
This specifies a font size of 0.6rem +0.5svw, bt the clamp function ensures the final value smaller than 0.9rem and never larger than 1.7 rem.

3. Unitless numbers and line height

line-height, z-index and font weight (700 is equivalent to bold, 400 is equivalent to normal)

When you use a unitless number, that declared value is inheritated, meaning its computed alue is recalculated for each inheriting child value.

4. Variables

To define a custom property, you declare it like any other CSS property

:root{
--main-font: Helvetica, Arial, sans-serif;
}