数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 CSS 中设置 calc 视口单位的变通方案？
在本文中，我们将重点关注如何在 CSS 中处理设置 calc() 功能以解决视口单位的问题。
在 HTML 网页中，在将值应用于 CSS 属性时，计算是使用 calc() 功能执行的。
calc() 功能执行一个计算，作为属性值使用，并进行基本的数学运算。你只能在值中使用 calc() 功能。
calc() 功能将参数作为单个表达式。该值将成为表达式的结果。即使表达式是许多运算符的组合，也遵循运算符优先级规则。
- + 加法
- - 减法
- * 乘法。任何参数都必须是数字
- / 除法。右侧必须是数字
语法
以下是使用的 calc() 函数的语法：
element {
// CSS property
property : calc( expression)
}
编写语法时应谨慎，并注意以下几点。
+ 和 - 运算符应该用空格包围，例如 height(100%-30px) 被认为是无效的，但 height(100% - 30px) 是有效的表达式。对于 / 和 * 运算符，不需要空格，但强烈建议使用。
除以 0 将导致错误。
示例
在这个程序中，我们将使用内联 CSS 设置 calc 视口单位的变通方案，我们将像往常一样导入这个 CSS，就像我们使用基本版本一样。此外，在 body 中，添加一个 div 标签和一个包含消息的 h1 标签，在这里我们使用 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 中，添加一个 div 标签和一个包含消息的 h1 标签，在这里我们使用 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>
示例
支持的浏览器 - 支持 pointer-events 属性的浏览器列在下面：
- Google Chrome 1.0
- Edge 12.0
- Internet Explorer 11.0
- Firefox 1.5
- Opera 9.0
- Safari 4.0
本文重点介绍了使用 CSS 规范的 calc() 函数在 CSS 中设置 calc 视口单位的变通方案。
更新于：2022年12月12日
343 次浏览
广告