移动端适配案例

小付-小付

已于 2023-01-13 14:14:34 修改

阅读量388

点赞数

文章标签： html servlet javascript

于 2022-07-05 10:56:55 首次发布

本文链接：https://blog.csdn.net/weixin_58431406/article/details/125615428

版权

<head>

<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=0.3, maximum-scale=1.0, minimum-scale=0.3">

width=device-width ：表示宽度是设备屏幕的宽度
initial-scale=0.3：表示初始的缩放比例
minimum-scale=0.3：表示最小的缩放比例
maximum-scale=1.0：表示最大的缩放比例
user-scalable=yes：表示用户是否可以调整缩放比例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态生成viewport适配方式</title>
    <script type="text/javascript">
        (function() {
            var w = window.screen.width;
            var targetW = 320;
            var scale = w / targetW; //当前尺寸/目标尺寸
            var meta = document.createElement("meta");
            meta.name = "viewport";
            meta.content = "user-scalable=no,initial-scale=" + scale + ",minimum-scale=" + scale + ",maximum-scale=" + scale + ""
            console.log(scale);
            document.head.appendChild(meta);
        })();
    </script>
    <style type="text/css">
        body {
            margin: 0;
        }
        div {
            width: 80px;
            height: 100px;
            float: left;
        }
        .box1 {
            background: red;
        }
        .box2 {
            background: blue;
        }
        .box3 {
            background: green;
        }
        .box4 {
            background: yellow;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>rem适配方式</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        width: 2rem;
        height: 0.5rem;
        background-color: red;
    }
</style>
<script>
    (function() {
        // 获取屏幕区域的宽度
        var w = document.documentElement.clientWidth

        // 获取html根元素
        var htmlNode = document.querySelector('html')

        // 设置字体大小
        htmlNode.style.fontSize = w + 'px'
    })()
</script>
<body>
    <div class="box"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百分比适配方式</title>
    <meta name="viewport" content="width=device-width,user-scalable=no">
    <style type="text/css">
        body {
            margin: 0;
        }
        div {
            width: 25%;
            height: 100px;
            float: left;
        }
        .box1 {
            background: red;
        }
        .box2 {
            background: blue;
        }
        .box3 {
            background: green;
        }
        .box4 {
            background: yellow;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>
</html>

 //@media 媒体查询
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        border: 1px solid #000;
        background: #000;
        height: 200px;
        width: 100%;
    }
    @media screen and (min-width: 300px) and (max-width: 500px) {
        .box {
            border: 1px solid rgb(226, 163, 163);
            background: rgb(226, 163, 163);
            height: 200px;
            width: 100%;
        }
    }
    @media screen and (min-width: 500px) and (max-width: 1000px) {
        .box {
            border: 1px solid rgb(218, 216, 157);
            background: rgb(218, 216, 157);
            height: 200px;
            width: 100%;
        }
    }
    @media screen and (min-width: 1000px) and (max-width: 1300px) {
        .box {
            border: 1px solid rgb(173, 200, 230);
            height: 200px;
            background: rgb(173, 200, 230);
            width: 100%;
        }
    }
</style>
<body>
    <div class="box"></div>
</body>
</html>