移动端自适应 rem

最新推荐文章于 2024-01-04 08:42:47 发布

qq_41563226

最新推荐文章于 2024-01-04 08:42:47 发布

阅读量369

点赞数

本文链接：https://blog.csdn.net/qq_41563226/article/details/100932306

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>cassie</title>
    <!-- 1rem  = 50 px -->
    <style>
        .cont{
            font-size: 0.32rem;
            /* 0.32rem = 16px /  50 */
        }
        img{
            width: 5.6rem;   
            /* 5.6rem  = 280px / 50 */
            /* margin: 10px auto; */
        }
    </style>
</head>
<body>
    <div class="cont">
        <div>cassie</div>
        <div>大家好！大家好！大家好！大家好！大家好！大家好！大家好！大家好！大家好！大家好！大家好！大家好！大家好！大家好！大家好！大家好！大家好！大家好！大家好！大家好！大家好！大家好！大家好！大家好！大家好！大家好！大家好！大家好！大家好！大家好！大家好！大家好！大家好！大家好！大家好！大家好！大家好！大家好！大家好！大家好！大家好！</div>
        <img src="./timg.jpg" alt="">
    </div>
</body>


<script>
 (function(doc, win) {
    const docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            if (clientWidth >= 750) {
                docEl.style.fontSize = '100px';
            } else {
                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            }
        };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
</html>