vw、px、rem换算

最新推荐文章于 2024-07-21 16:35:41 发布

元飞

最新推荐文章于 2024-07-21 16:35:41 发布

阅读量9.3k

点赞数 3

分类专栏： # html & css 文章标签： css html css3

本文链接：https://blog.csdn.net/wjf_hb/article/details/122348275

版权

html & css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>