移动web开发入门-学习笔记-3

最新推荐文章于 2024-05-05 18:17:26 发布

wuyi~lin

最新推荐文章于 2024-05-05 18:17:26 发布

阅读量86

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/pakho_lin/article/details/119803631

版权

文章目录

移动端屏幕适配

移动端屏幕适配

在这里插入图片描述

一、简单适配

1、简单适配原理

 <style>
        * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }

        .header-container {
            width: 100%;
            /*% em rem vw/vh*/
            /*1rem = html font-size*/
            /*1rem=25px*/
            /*750px 1rem=750px*/
            /*height: 100px / 750px rem*/
            /*height: 0.13333333333333333333333333333333rem;*/

            /*375px 1rem=375px*/
            /*height: 50 / 375 = 0.13333333333333333333333333333333rem;*/
            /*height: 2rem;*/

            /*750px 1rem=750 / 18.75 = 40px*/
            /*height: 100 / 40 = 2.5rem;*/
            /*height: 2.5rem;*/
            height: 2.5rem;
            background-color: rgba(222, 24, 27, 0.9);
        }

        html {
            /*1rem = viewWidth / 18.75*/
            font-size: 20px;
        }
    </style>

2、简单适配实现

(function () {
    'use strict';

    setRemUnit();

    window.addEventListener('resize', setRemUnit);

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

        docEl.style.fontSize = viewWidth / ratio + 'px';
    }
})();

二、通用适配

1、通用适配原理

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no"> -->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=0.3333333, maximum-scale=0.3333333, minimum-scale=0.3333333, user-scalable=no"> -->
    <title>3.1 通用适配原理</title>
    <style>
        * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }

        .header-container {
            width: 100%;
            height: 2.5rem;
            background-color: rgba(222, 24, 27, 0.9);
            /*1px边框*/
            border-bottom: 1px solid #000;
        }
    </style>
    <script>
        (function () {
            'use strict';

            setRemUnit();

            window.addEventListener('resize', setRemUnit);

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

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

    <header class="header-container"></header>

</body>

2、通用适配实现

(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';
    }
})();

在这里插入图片描述

wuyi~lin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动web开发入门-学习笔记-3

文章目录移动端屏幕适配一、简单适配1、简单适配原理2、简单适配实现3、简单适配应用二、通用适配1、通用适配原理2、通用适配实现3、通用适配应用移动端屏幕适配![在这里插入图片描述](https://img-blog.csdnimg.cn/eeed27af60db4d49a99256992dc16473.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG 4ubmV
复制链接

扫一扫