You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
37 lines
1.2 KiB
37 lines
1.2 KiB
<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>
|
|
html {
|
|
font-size: 10px;
|
|
}
|
|
div {
|
|
/* rem 等于根元素 html 设置为准，这里的 1rem 等于 16px */
|
|
font-size: 1rem;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div>
|
|
<span>123</span>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
var c = () => {
|
|
// 获取当前设备宽度
|
|
let w = document.documentElement.clientWidth
|
|
// 设置字号，默认为字号为20, 以 320 的宽度作为设备依据（可选），如果计算出当前设备的字号大于40，就以40字号显示
|
|
let n = (20*(w / 320 ) > 40 ? 40 + "px" : 20*(w / 320 ) + "px")
|
|
// 当计算好后，赋值给 fontSize
|
|
document.documentElement.style.fontSize = n
|
|
}
|
|
// 设置为初始化的效果
|
|
window.addEventListener("load", c) // load 是重新加载计算
|
|
// 当屏幕尺寸改变后的效果
|
|
window.addEventListener("resize", c) // resize 属性规定是否可由用户调整元素的尺寸大小
|
|
</script>
|
|
</html>
|