我们应该如何在 CSS 中使用 rem、em、vw 和 px？
我们应该如何在 CSS 中使用 rem、em、vw 和 px？
当我们开始创建网站时，我们通过 HTML 创建网站的基本结构，并使用 CSS 使网站的设计看起来更好。让我们检查一下 rem、em、vw 和 px 长度单位以及应该如何使用它们。
在 CSS 中表示长度的标签，例如高度、宽度、填充、边距。使用这些表达式对应的数值和长度单位，例如5 rem、3 em、6vw、8px。
CSS 中使用了两种类型的长度单位：绝对的和相对的。
绝对长度单位通常被认为总是相同的大小，它们与其他任何东西无关。这些单元中的大多数用于打印而不是屏幕输出。例如毫米、厘米、英寸等。
px（像素）值在屏幕上常用。
在相对长度单位中，它根据另一个长度属性指定长度。这样，页面上的元素的缩放就可以根据其他元素来做，可以实现更有计划的缩放。例如 rem、em、vw 等。
在本文中，我将只处理我在一般使用中看到的长度单位。
雷姆：
它与根元素的字体大小有关。
示例 HTML 文档；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>长度单位</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div id="first-div"> <p>公司本身就是一家非常成功的公司。要成为一名建筑师，他必须承担他的劳动成果，因为作为一名发明家，我们被对真理的渴望所驱使。</p> <div id="second-div"> <p>公司本身就是一家非常成功的公司。苦与苦、苦与苦的区别，区别于内疚、欲望或当下！</p> </div> </div> </body> </html>
CSS 文件；
html { 字体大小：10px； } #first-div { 字体大小：2rem； } #second-div { 字体大小：4rem； }
first-div id 中的 font-size 为：10 * 2 = 20px。 second-div id 中的字体大小：10*4 = 40px。
看法 ;
时间：
它与元素的字体大小有关。 3 em 等于当前字体大小的 3 倍。
示例 HTML 文档；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>长度单位 2</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div id="first-div"> <p>公司本身就是一家非常成功的公司。要成为一名建筑师，他必须承担他的劳动成果，因为作为一名发明家，我们被对真理的渴望所驱使。</p> </div> <div id="second-div"> <p>公司本身就是一家非常成功的公司。苦与苦、苦与苦的分别，与罪、欲<span>、现相区别！</span></p> </div> </body> </html>
CSS 文件；
#first-div { 字体大小：20px； 行高：2em； } #second-div { 字体大小：42px； } 跨度 { 字体大小：0.6em； }
line-height = 202= 40px，span 元素的 font-size = 420.6=24.4px。
看法 ;
大众：
基于视口宽度的 1%
示例 HTML 文档；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>长度单位 3</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div id="first-div"> <p>公司本身就是一家非常成功的公司。要成为一名建筑师，他必须承担他的劳动成果，因为作为一名发明家，我们被对真理的渴望所驱使。</p> </div> <div id="second-div"> <p>公司本身就是一家非常成功的公司。苦与苦、苦与苦的区别，区别于内疚、欲望或当下！</p> </div> </body> </html>
CSS 文件；
#first-div { 字体大小：2vw； } #second-div { 字体大小：4vw； }
看法 ;
像素：
1 像素 = 1 英寸的 1/96。
示例 HTML 文档；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>长度单位 4</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div id="first-div"> <p>公司本身就是一家非常成功的公司。要成为一名建筑师，他必须承担他的劳动成果，因为作为一名发明家，我们被对真理的渴望所驱使。</p> </div> <div id="second-div"> <p>公司本身就是一家非常成功的公司。苦与苦、苦与苦的区别，区别于内疚、欲望或当下！</p> </div> </body> </html>
CSS 文件；
#first-div { 字体大小：20px； } #second-div { 字体大小：30px； }
看法 ;
我试图解释 CSS 中使用的一些长度单位。我希望它有用。感谢您的时间…
参考：
[
CSS 单位
CSS 有几种不同的单位来表示长度。许多 CSS 属性采用“长度”值，例如宽度……
www.w3schools.com
](https://www.w3schools.com/cssref/css_units.asp)
[
CSS 值和单位 - 学习 Web 开发 | MDN
这是您可能遇到的最常见的值和单位类型的快速浏览。你可以看看……
developer.mozilla.org
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
