MobilePage01.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>一个移动端的测试页面</title>
    <style>
        body{
            margin:0;
            padding:0;
        }
        #divLeft{
            width:calc(50% - 2vw);
            border:1px solid red;
            float:left;
        }
        #divRight{
            width:50%;
            border:0px solid blue;
            float:left;
        }
        #divBottom{
            width:100%;
            border:1px solid gray;
            font-size:larger;
        }
        .sep{
            clear:both;
        }
        #vw_test{
            margin-top:2vh;
            width:calc(100vw - 2vw);
            border:1vw solid #cccccc;
        }
    
    </style>
</head>
<body>
    <form action="">
        <!--
        <h1>这是一个测试页面</h1>
        email: <input type="email" name="user_email">  
        -->
        <div id="divLeft">
            <p>这是左边的容器</p>
        </div>
        <div id="divRight">
            <p>这是右边的容器</p>
        </div>
        <div class="sep"></div>
        <div id="divBottom">
            这是下面的内容
        </div>
        <div id="vw_test">
            这部分内容用来测试vm这个东西的
        </div>
    </form>
</body>
</html>