資料結構
網路
關係資料庫管理系統 (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 次瀏覽
廣告