CSS 如何设置Calc Viewport单位的解决方案

在本文中，我们将转向如何处理在CSS中设置calc()功能以适应Viewport单位的解决方案。

在HTML网页中，当应用值到CSS属性时，使用calc()功能进行计算。

calc()功能执行一个表达式，用作属性值，并用于执行基本数学运算。您只能在值中使用calc()功能。

calc()功能接受一个表达式作为参数。该表达式的结果将成为值。即使表达式是多个操作符的组合，也遵循操作符的优先规则。

+ 加法
- 减法
* 乘法。任何一个参数都应该是一个数字
/ 除法。右边的参数应该是一个数字

语法

以下是使用calc()函数的语法：

element {
   // CSS property
   property : calc( expression) 
}

一个在构建句子结构时应当小心，应当处理好附带的地方。

+ 和 – 符号的前后应该有空格，例如 height(100%-30px) 被视为无效，但 height(100% – 30px) 是一个有效的表达式。对于 * 和 / 符号，虽然不需要有空格，但强烈推荐有空格。
除以0会导致错误。

示例

在本程序中，我们将使用内部CSS设置calc视角单位的解决方案，就像我们通常使用基本版本一样导入这个CSS。进一步，在body中添加一个division标签和一个带有信息的heading标签，我们在这里使用calc()函数来改变div元素的宽度为90px并显示结果。

<!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>

示例

在这个程序中，我们将使用内部CSS来设置calc透视单位的解决办法，我们将像往常一样导入这个CSS，与基本版本一样。之后，在body中添加一个division标签和一个带有消息的标题标签，我们在这里使用calc()函数来改变h1元素的文本大小并显示结果。

<!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>