原生html移动端适配

作者: 泪滴在琴上 | 来源:发表于2019-10-16 16:15 被阅读0次

原生html移动端适配
4. 移动端适配相关概念
CSS 全解析实战(二)-HTML基础强化
移动端原生js适配
Less for 循环
移动端页面
移动端适配
像素及适配
移动端适配(amfe-flexible)
移动端适配及pc端跳转代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>XXXXXXXX</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html{
            height: 100%;
        }
        body{
            height: 100%;
        }
        .out{
            width: 100%;
            height: 100%;
            background: url("./img/bg.png") bottom center no-repeat;
            background-size: 100% auto;
            position: relative;
            padding-top: 2.65rem;
            box-sizing: border-box;
        }
        .out>img{
            display: block;
            width:5rem;
            height: 5rem;
            border-radius: 0.4rem;
            margin: 0 auto;

        }
        .out>p{
            text-align: center;
            font-family: PingFangSC-Regular;
        }
        .out .title{
            font-size: 1.25rem;
            letter-spacing: 0.05rem;
            color: #3f3f3f;
            margin-top: 0.55rem;
        }
        .out .desc{
            font-size: 0.875rem;
            letter-spacing: 0.08rem;
            color: #3f3f3f;
            margin-top: 0.45rem;
        }
        .bottom .tip{
            font-family: PingFangSC-Regular;
            font-size:0.75rem;
            color: #ffffff;
            text-align: center;
            margin-bottom: 1.65rem;
        }
        .bottom{
            width: 100%;
            position: absolute;
            bottom: 5rem;
        }
        .bottom div{
            margin: 0 auto;
            width: 13.1875rem;
            height: 2.875rem;
            border-radius: 0.4rem;
            border: solid 0.05rem #ffffff;
            color: white;
            padding: 0.6625rem 2rem;
            box-sizing: border-box;
            margin-bottom: 2.25rem;
            text-align: center;
        }
        .bottom div img{
            display: inline-block;
            width: 1.4rem;
            height: 1.55rem;
            margin-right: 1.2rem;
        }
        .bottom div span{
            vertical-align: top;
        }
    </style>
</head>
<body>
    <div class="out">
        <img src="./img/ilogo.png" alt="">
        <p class="title">XXXX</p>
        <p class="desc">-XXXXXXXXX-</p>
        <div class="bottom">
            <p class="tip">XXXXXXXXXXXXXXXXXXX</p>
            <div><img src="./img/ios@2x.png" alt=""><span>XXXX</span></div>
            <div><img src="./img/anzhuo@2x.png" alt=""><span>XXXX</span></div>
        </div>
    </div>
    <script>
        const scale = document.documentElement.clientWidth / 750
        document.documentElement.style.fontSize = (32 * Math.min(scale, 2)) + 'px'
    </script>
</body>
</html>