Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Set Calc Viewport Units Workaround in CSS?
In this article, we will shift focus over to the way to deal with set cal() capability for viewport units workaround in CSS.
In the HTML site page, while applying values to the CSS properties, the computations are performed by utilizing calc() capability.
The calc() capability plays out an estimation to be utilized as the property estimation and for doing essential math. The just spot you can utilize the calc() capability is in values.
The calc() capability takes boundaries as a solitary articulation. The worth turns into the aftereffect of the articulation. Indeed, even the articulation is the mix of numerous administrators adhering to the guideline priority rules.
- + Addition
- – Subtraction
- * Multiplication. Any of the arguments should be a number
- / Division. The right-hand side should be a number
Syntax
The following is the syntax to the calc() function used −
element {
// CSS property
property : calc( expression)
}
One should be cautious while composing the sentence structure and should deal with the accompanying places.
The + and - administrator should be encircled by a blank area for example height(100%-30px) is viewed as invalid yet height(100% - 30px) is a substantial articulation. For the/and * administrator, the white dividing isn't required however is energetically suggested.
Division by 0 outcomes in a blunder.
Example
In this program, we will set calc perspective units workaround utilizing inside CSS, where we will import this CSS as ordinarily, we use to do with the essential version. Further, in the body, adding a division tag as well as a heading tag with a message in it with the classes here we are utilizing the calc() capability to change the width of the div component by 90px and show the result.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Set Calc Viewport Units Workaround in CSS
</title>
<style>
body {
background-color:skyblue;
}
div {
/* Using the calc() func to change the
width of the div element by 90px */
width: calc(90% - 90px);
border: 1px solid black;
background-color: white;
margin-top: 50px;
text-align: center;
}
</style>
</head>
<body>
<div>
<h1>Set Calc Viewport Units Workaround in CSS Using Cal() Function</h1>
</div>
</body>
</html>
Example
In this program, we will set calc perspective units workaround utilizing interior CSS, where we will import this CSS as ordinarily, we use to do with the essential version. Further, in the body, adding a division tag as well as a heading tag with a message in it with the classes here we are utilizing the calc() capability to change the text dimension of the h1 component and show the result.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Set Calc Viewport Units Workaround in CSS Using Calc() Function
</title>
<style>
body {
background-color: skyblue;
}
h1 {
color: red;
/* Using the calc() func to change
the font size of the h1 element */
font-size: calc(1.2rem + 2vw);
}
div {
width: calc(100% - 100px);
border: 1px solid black;
background-color: white;
margin-top: 50px;
text-align: center;
}
</style>
</head>
<body>
<div>
<h1> Set Calc Viewport Units Workaround in CSS Using Calc() Function</h1>
</div>
</body>
</html>
Example
Supported Browsers − The browsers supported by pointer-events Property are listed below −
- Google Chrome 1.0
- Edge 12.0
- Internet Explorer 11.0
- Firefox 1.5
- Opera 9.0
- Safari 4.0
This article focused on Set Calc Viewport Units Workaround in CSS by using the calc() function of the CSS specification.
296 Views
