How to Set Calc Viewport Units Workaround in CSS ?
In the HTML webpage, when applying values to the CSS properties, the calculations are performed by using calc() function.
Syntax:
element {
// CSS property
property : calc( expression)
}
Properties: The calc() function takes parameters in the form of a single expression. The value becomes the result of the expression. Even the expression be the combination of many operators follow the standard precedence rules.
- + Addition
- – Subtraction
- * Multiplication. Any of the arguments should be a number
- / Division. The right-hand side should be a number
One must be careful while writing the syntax and must take care of the following points.
- The + and – operator must be surrounded by white space i.e. height(100%-30px) is considered to be invalid but height(100% – 30px) is a valid expression. For the / and * operator, the white spacing is not necessary but is highly recommended.
- Division by 0 results in an error.
Example 1:
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title> CSS Calc Viewport Units Workaround </title> <style> body { background-color: rgb(30, 240, 30); } h1 { color: rgb(30, 240, 30); } div { width: calc(100% - 100px); /* Using the calc() func to change the width of the div element by 100px */ border: 1px solid black; background-color: white; margin-top: 50px; text-align: center; } </style></head> <body> <div> <h1>working of the calc() function</h1> </div></body> </html> |
output:
Example 2:
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title> CSS Calc Viewport Units Workaround </title> <style> body { background-color: rgb(30, 240, 30); } h1 { color: rgb(30, 240, 30); /* Using the calc() func to change the font size of the h1 element */ font-size: calc(1.5rem + 3vw); } div { width: calc(100% - 100px); border: 1px solid black; background-color: white; margin-top: 50px; text-align: center; } </style></head> <body> <div> <h1> working of the calc() function</h1> </div></body> </html> |
Output:
.png)
.png)