例子
<!DOCTYPE html>
<html>
<head>
<title>网页按照比例缩放</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style type="text/css">
html{
font-size: 625%;
height: 100%;
}
body {
font-family: "Microsoft YaHei";
color: #333;
width: 100%;
max-width: 1000px;
min-width: 320px;
height: 100%;
margin:0 auto;
}
.content{
height: 100%;
background: #ccc;
font-size: 0.2rem;
text-align: center;
box-sizing: border-box;
padding-top: 0.1rem;
}
.content img {
width: 2rem;
}
.content .font-val {
font-size:0.2rem;
}
</style>
</head>
<body>
<div class="content">
css中单位px和em，rem的区别！<br>
移动端设置页面最大宽度640px 最小宽度320px<br>
font-size:625% 是相对于设备默认的字体大小，那么接下来就要定义设备的默认字体大小 font-size，。
<div>
rem是一个相对大小的值，它相对于根元素<\html>， 比如假设，我们设置html的字体大小的值为html｛font-size: 87.5%;｝（也就是14px）。 然后其他的字体就是将你要的值除以14得到的值； 比如iphone5主题大小是320px；换算成rem就是320/14=22.85714rem； padding的24px也就是24/14=1.714285714285714rem，以此类推。 上面的14是个变量，相对于你对根元素html字体大小的设定，如果你设定的是62.5%，那除数就变成10了，对照表如右图： 用这个rem单位的好处有啥我不知道，不过如果你根元素的字体大小选62.5%，那px和rem之间的换算就是px直接除以10就得到rem了，这比em简单多了，到现在我都没搞清楚em和px之间是如何换算的。 另外rem在ie8及ie8以下的版本不支持外其他浏览器都支持，如果你要考虑ie8及一下，可以设置个px再设置个rem就可以了。
</div>
<div>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575596737&di=cbe8f9916f9029d489c5938ee9ec9a87&imgtype=jpg&er=1&src=http%3A%2F%2Fimg.sucaihuo.com%2Fsources%2F14%2F1490%2Fbig.jpg">
</div>
<div class="font-val">第二种字体大小</div>
</div>
<script type="text/javascript">
window.onload = function () {
function resi () {
let html = document.querySelector("html");
let clienWidth = document.body.clientWidth || document.documentElement.clientWidth;
let maxW = 640
let minW = 320
if (clienWidth > maxW) {
clienWidth = maxW
}
let ratio = clienWidth / minW
html.style.fontSize = 50 * ratio + "px"
}
window.onresize = resi
}
</script>
</body>
</html>
