Editing 使用 CSS 和 JavaScript 缩放/成比例的内容 NET牛人

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <title>使用 CSS 和 JavaScript 缩放/成比例的内容</title>
</head>

<body>
    <div class="nr-box">
        <h1>缩放内容显示</h1>
        <p>直接缩放内容显示，有点像 SVG</p>
        <p>直接缩放内容显示，有点像 SVG</p>
        <p> 😀 😁 😂 😃 </p>
    </div>
</body>

</html>

* {
    box-sizing: border-box;
}
body {
    position: relative;
    height: 95vh;
    background-color: #ddd;
}
.nr-box {
    width: 400px;
    height: 300px;
    padding: 50px;
    text-align: center;
    background: white;
    position: relative;
    left: 50%;
    top: 50%;
    color: deeppink;
    transform: translate(-50%, -50%);
}

var domBox = document.querySelector('.nr-box');
var domBoxW = domBox.clientWidth, domBoxH = domBox.clientHeight;

function doResize() {
    var scale = Math.min(
        document.documentElement.clientWidth / domBoxW,
        document.documentElement.clientHeight / domBoxH
    );

    domBox.style.transform = "translate(-50%, -50%) scale(" + scale + ")"
}
doResize();
window.addEventListener('resize', doResize, false)