rem如何计算得出
来源：3-29 项目作业
PADAopanda
2021-08-24 13:29:18
问题描述：
第二种方法rem布局我参考了同学的答案，但还是搞不懂 width = 3.75rem 是怎么计算出来的。
<!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>Document</title>
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background-color: #1b4059;
color: #595B66;
}
html {
font-size: 12px;
}
.square {
/* div居于屏幕正中间 */
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/* 方法一：vw vh */
/* css直接：盒子高度和高度直接设置20vw,但是vw有兼容性问题 */
.box1 {
width: 20vw;
height: 20vw;
background-color: rgba(255, 213, 0, 0.791);
}
/* 方法二：rem */
/* js配合：使用rem做单位，设置宽高 */
.box2 {
width: 3.75rem;
height: 3.75rem;
background-color: rgba(245, 189, 172, 0.791);
}
/* 方法三：百分比% */
/* js配合：每次改变屏幕大小时，用onresize事件获取视口宽度，再设置盒子的高度 */
.box3 {
width: 20%;
background-color: rgba(224, 150, 218, 0.791);
}
</style>
</head>
<body>
<div class="square box1"></div>
<div class="square box2"></div>
<div class="square box3" id="box3"></div>
</body>
<script>
// 方法二：使用rem做单位，设置宽高
setRemUnit();
// onresize 事件会在窗口或框架被调整大小时发生
window.onresize = setRemUnit;
function setRemUnit() {
var viewWidth = document.documentElement.clientWidth || window.innerWidth;
document.documentElement.style.fontSize = viewWidth / 375 * 20 + 'px';
}
// 方法三：每次改变屏幕大小时，获取视口宽度，再设置盒子的高度，比较麻烦
// onresize 事件会在窗口或框架被调整大小时发生
const box = document.getElementById('box3');
window.onresize = function () {
let vw = document.documentElement.clientWidth || window.innerWidth;
box.style.height = vw * 0.2 + 'px';
}
</script>
</html>
写回答
1回答
-
同学你好，viewWidth / 375 * 20可以看做是viewWidth *20/375 ，正常计算20%的宽度应该是viewWidth *0.2 ，现在乘以了20，扩大了100倍，然后除以375，得到了字体大小。那么是不是计算宽度的时候就可以使用3.75*字体大小，也就是乘以了375，再缩小100倍。
第三种建议封装为函数，单独调用一次，窗口大小改变的时候也调用，避免刷新页面的时候box3无高度
祝学习愉快！
0
相似问题