<!DOCTYPE html>
<!-- 这个font-size:20px UI给的字体大小-->
<html lang="en" style="font-size: 20px;">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
/* 将使用怪异盒模型 */
box-sizing:border-box;
}
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div{
font-size: 2rem;
}
</style>
<body>
<div>我</div>爱中国
</body>
</html>
<script>
const setFont=()=>{
//获取变化后的屏幕宽度
const width=window.innerWidth
// console.log(width);
// 计算缩放比例
//width / 96 是屏幕尺寸 / UI告知的屏幕分为多少份
//96就是 设计稿/字体大小
const scale=width / 96
//设置html的根元素字体大小，改变整个页面的字体大小
document.querySelector("html").style.fontSize =scale + 'px'
}
setFont()
//动态调整字体大小
window.οnresize=setFont
</script>
<!--
还要调整插件，因为每次UI给的设计图不同要根据屏幕调整
//
px to rem & rpx & vw (cssrem) 根据这个插件
点击设置的小按钮，打开扩展设置，
Cssrem: Root Font Size
基准font-size（单位：`px`）, default: 16
根据一下换算
UI给的字体大小
如果是移动端改
Cssrem: Wxss Device Width
设备分辨率宽度，官方推荐使用 iPhone6 作为视觉稿的标准，默认：`375`
改为设计稿尺寸
如果是PC端
Cssrem: Wxss Screen Width
规定屏幕宽度，默认 `750`，[尺寸单位]
(https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html)
改为设计稿尺寸
-->
