rem单位 -- 响应式布局

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>实名认证</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
        <style>
            *{
                margin:0;
                padding: 0;
            }
            body{
                background-color: #EDEDED;
            }
            a{
                text-decoration: none;
            }
            form{
                width: 100%;
                height: auto;
                position: relative;
            }
            .retbtn{
                display: inline-block;
                width: 1rem;
                height: 1rem;
                position: absolute;
                line-height: 1.1rem;
                text-decoration: none;
                z-index: 999;
                text-align: center;
                left: 0.1rem;
            }
            .retbtn img{
                width:0.6rem;
                height: 0.6rem;
            }
            .headline{
                font-size: 0.45rem;
                text-align: center;
                display: block;
                padding: 0.3rem;
                border-bottom: 2.5px solid #ccc;
                font-weight: bold;
            }
            .prompt_title{
                display: block;
                padding: 0.25rem;
                font-size: 0.4rem;
                background-color:#E3E3E3;
                color: #999999;
            }
            .lab{
                padding: 0 0 0.3rem;
                display: block;
                background-color: #fff;
                margin-bottom: 1.5px;
                line-height: 1.2rem;
                box-shadow: 0 0 0.05rem 0 rgba(0,0,0,.1);
            }
            .name_first1,
            .name_first2,
            .name_first{
                font-size: 0.45rem;
                vertical-align: middle;
            }
            .lab input{
                width: 7rem;
                height: 0.8rem;
                vertical-align: middle;
                font-size: 0.4rem;
                text-align: right;
                border: none;
            }
            .btn{
                width:8rem;
                height: 1.3rem;
                margin-left: 1rem;
                margin-top: 0.6rem;
                font-size: 0.5rem;
                background-color: #3462FF;
                color: white;
                border: none;
                -webkit-appearance: none;
            }
        </style>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <form id="form1">
            <input type="hidden" name="member_id" value="2" />
            <a class="retbtn" href="javascript:history.go(-1);">
                <img src="" alt="" />
            </a>
            <span class="headline">实名认证</span>
            <span class="prompt_title">请填写 本人实名信息</span>
            <div class="information">
                <label class="lab">
                    <span class="name_first">真实姓名</span>
                    <input type="text" name="real_name" id="real_name" value="" placeholder="请输入您的真实姓名" />
                    <span class="spa spa1"></span>
                </label>
                <label class="lab">
                    <span class="name_first1">身份证号</span>
                    <input type="text" name="identity_card_no" id="identity_card_no" value="" placeholder="请输入您的身份证号" />
                    <span class="spa spa2"></span>
                </label>
                <label class="lab">
                    <span class="name_first2">银行卡号</span>
                    <input type="text" name="bank_card_no" id="bank_card_no" value="" placeholder="请输入您的银行卡号" />
                    <span class="spa spa3"></span>
                </label>
            </div>
            <input class="btn" type="submit" value="开始认证" id="btn1" />
        </form>

    </body>
</html>

<script>
    // 获取屏幕宽度
    let htmlWidth = document.documentElement.clientWidth ||
                            document.body.clientWidth;              //  兼容写法
    // 计算fontSize
    let htmlDom = document.getElementsByTagName('html')[0];
    htmlDom.style.fontSize = htmlWidth / 10 + 'px';
</script>
rem单位 -- 响应式布局

猜你喜欢
