<!--
* @Author:
* @Date: 2021-12-10 14:45:45
* @LastEditTime: 2021-12-10 15:33:53
* @FilePath: \123\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>rem</title>
</head>
<style>
li {
font-size: 1rem;
}
</style>
<body>
<div class="container">
<div class="item">
<ul>
<li>姓名</li>
<li>张三</li>
<li>性别</li>
<li>男</li>
</ul>
</div>
</div>
<script>
remInit(24, 720)
//基准值 ,baseWidth设计图纸宽度
function remInit(baseSize, baseWidth) {
function baseFontSize(baseSize, baseWidth) {
//这里计算缩放比
const scale = document.documentElement.clientWidth / baseWidth
console.log(scale);
console.log(Math.min(scale, 1));
// Math.min(scale, 1) 选取最小的值作为比例
//大于1时说明当前屏幕宽度大于设计图纸宽度适用baseSize基准值
//小于1时说明当前屏幕小于设计图纸宽度通过计算得出基准值
document.documentElement.style.fontSize = baseSize * Math.min(scale, 1) + 'px';
console.log(baseSize * Math.min(scale, 1) + 'px');
}
window.onload = () => {
baseFontSize(baseSize, baseWidth)
}
//每次窗口发生变化执行一次
window.onresize = () => {
baseFontSize(baseSize, baseWidth)
}
}
</script>
</body>
</html>
移动端rem布局简易版
最新推荐文章于 2024-08-29 17:07:09 发布