自适应布局的几种方案的总结

html&css

发布日期: 2022-07-31

文章字数: 331

阅读时长: 1 分

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <!-- 百度的移动mate  也可以删除 淘宝无限适配flexible会自动添加-->

    <!-- <script src='flexible.js'></script> -->
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        main {
            height: 200px;
            background-color: pink;
            font-size: 0.14rem;
        }

        html {
            font-size: 26.66vw;
            /* 100vw=>375px x=>100px 
            100/375 * 100= 26.666
            */
        }
    </style>
</head>

<body>
    <main>
        <span>
            总结有以下方案：
            <br>
            一、淘宝无限适配 + rem <br>
            二、手写js监听浏览器宽度，设置动态font-size +rem 和淘宝的无限适配差不多 好处是可以自己设定规则 例如不让ipad上面的字体太大就设置如果超过700px 设置最大font-size
            三、使用vw + rem vw是视口宽度 设置html的font-size为vw宽 那么rem就是自适应大小的单位
            四、使用vmin来替换vw，vmin和vmax是视口的最大值和最小值，使用vmin在横屏时可以显示更多的内容(例子bilibili)
        </span>
    </main>

    <script>

        // function reFontSize() {

        //     let doc = document.documentElement;
        //     console.log('reFontSize' + doc.clientWidth)
        //     let font_size = doc.clientWidth / 3.75;
        //     //以iphone 678为模板 375/3.75 =100
        //     //1rem = 100px 设置方便
        //     doc.style.fontSize = font_size + 'px';
        // }

        // window.onload = reFontSize();


        // window.onresize = function () {
        //     reFontSize();
        // }
    </script>
</body>

</html>