vw、px、rem换算

vw、px、rem换算1vw=1%窗口宽度（也就是窗口宽度是100vw）以固定宽度750px为例进行计算：----------------------------------------------------------------------------------------------方法一、vw、px、rem换算（1rem = 100px）：已知：750px = 100vw计算：1px

元飞

9616人浏览 · 2022-01-06 17:06:28

元飞 · 2022-01-06 17:06:28 发布

vw、px、rem换算

1vw=1%窗口宽度（也就是窗口宽度是100vw）

以固定宽度750px为例进行计算：
-----------------------------------------------------------------------------------------------------------------
一、vw、px、rem换算（1rem = 100px）：（谷歌，火狐，IE、uc、qq浏览器适用）
已知：750px = 100vw
计算：1px = (100vw / 750px) = 0.1333vw

定义：1rem = 100px （也就是1px = 0.01rem）
那么：1rem = 0.1333vw * 100 = 13.33vw （设置：根标签html字体为100px：font-size = 13.33vw）

换算：1rem = 100px = 13.33vw
1px = 0.01rem = 0.1333vw

示例：16px = 0.01rem * 16 = 0.16rem
-----------------------------------------------------------------------------------------------------------------
二、也可以这样换算（1rem = 1px）：（谷歌，火狐，IE适用，uc、qq浏览器不适用）
已知：750px = 100vw
计算：1px = (100vw / 750px) = 0.1333vw

定义：1rem = 1px （也就是1px = 1rem）
那么：1rem = 0.1333vw （设置：html的根元素设置为1px：font-size = 0.1333vw）

换算：1rem = 1px = 0.1333vw
1px = 1rem = 0.1333vw

示例：16px = 16rem
-----------------------------------------------------------------------------------------------------------------
注意：根标签html字体小于12px时：
谷歌，火狐，IE正常，
uc、qq浏览器，按照12px计算，即根元素使用1px,元素设置16rem,被算成12*16 =192px，网页放大。
-----------------------------------------------------------------------------------------------------------------
代码：
<!doctype html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<html>
<head>
<style>
html {
font-size: 13.333vw;
}
.div1 {
width:3.75rem;
height:3.75rem;
background-color:red;
}
</style>
</head>
<body>
<div class="div1">1/2</div>
</body>
</html>