<!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单位 -- 响应式布局