例子
<!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>
