3-7请老师检查下代码，谢谢

来源：3-7 自由编程

不厌_

2021-07-30 21:30:17

相关代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        li {
            list-style: none;
        }
        .product {
            padding: 0 1rem;
            display: flex;
            flex-wrap: wrap;
            background-color: rgb(233, 233, 233);
        }
        .product-item {
            width: 50%;
        }
        .product-img {
            width: 100%;
            vertical-align: top;
        }
    </style>
</head>

<body>
    <section class="product-container">
        <ul class="product">
            <li class="product-item">
                <img src="./img/1.jpg" alt="" class="product-img">
            </li>
            <li class="product-item">
                <img src="./img/2.jpg" alt="" class="product-img">
            </li>
            <li class="product-item">
                <img src="./img/3.jpg" alt="" class="product-img">
            </li>
            <li class="product-item">
                <img src="./img/4.jpg" alt="" class="product-img">
            </li>
        </ul>
    </section>
    <script>
        (function () {
            'use strict';

            // dpr->scale = 1 / dpr
            var docEl = document.documentElement,
                viewportEl = document.querySelector('meta[name="viewport"]'),
                dpr = window.devicePixelRatio || 1,
                maxWidth = 540,
                minWidth = 320;

            dpr = dpr >= 3 ? 3 : (dpr >= 2 ? 2 : 1);

            docEl.setAttribute('data-dpr', dpr);
            docEl.setAttribute('max-width', maxWidth);
            docEl.setAttribute('min-width', minWidth);


            var scale = 1 / dpr,
                content = 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no';

            if (viewportEl) {
                viewportEl.setAttribute('content', content);
            } else {
                viewportEl = document.createElement('meta');
                viewportEl.setAttribute('name', 'viewport');
                viewportEl.setAttribute('content', content);
                document.head.appendChild(viewportEl);
            }

            setRemUnit();

            window.addEventListener('resize', setRemUnit);

            function setRemUnit() {
                var ratio = 18.75;
                var viewWidth = docEl.getBoundingClientRect().width || window.innerWidth;

                // console.log(viewWidth);

                if (maxWidth && (viewWidth / dpr > maxWidth)) {
                    viewWidth = maxWidth * dpr;
                } else if (minWidth && (viewWidth / dpr < minWidth)) {
                    viewWidth = minWidth * dpr;
                }

                docEl.style.fontSize = viewWidth / ratio + 'px';
            }
        })();
    </script>
</body>

</html>