登錄界面如果要實現(xiàn)響應式 , 需要注意寬度的設置和media query的使用
寬度一般都是按百分比設置,當頁面中百分比也滿足不了的時候,可以使用media query區(qū)分出當前屏幕的寬度
根據(jù)不同的屏幕寬度設置不同的css
例如下面gofly的這個登錄頁 , 訪問地址 : https://gofly.sopans.com/login
樣式部分 :
正常按照pc的樣式進行開發(fā) , 然后再增加
@media (max-width: 768px) {}
在低于768px寬度的屏幕中 , 單獨設置樣式
<style> body { background-color: #f5f5f5; margin: 0; padding: 0; } .signin { width: 350px; padding: 20px; margin:100px auto; background: #fff; -webkit-box-shadow: 0 1px 2px 0 rgba(101,129,156,.08); box-shadow: 0 1px 2px 0 rgba(101,129,156,.08); } .signin h1,.signin h2,.signin .copyright{ font-weight: normal; color: #4d627b; text-align: center; } .signin .loginTitle{ font-size: 24px; } .signin .loginDesc{ font-size: 14px; margin-bottom: 15px; } .signin .loginDesc a{ color: #409EFF; text-decoration: none; } .signin .copyright{ font-size: 12px; } @media (max-width: 768px) { .signin{ width: 90%; margin:40px auto; background-color: #f5f5f5; box-shadow:none; } } </style>
html部分 ,可以忽略掉vue elementui的標簽:
<body> <div id="app" class="signin"> <template> <h1 class="loginTitle">賬戶登錄</h1> <h2 class="loginDesc">請聯(lián)系<a href="/chatIndex?kefu_id=kefu2">開發(fā)者</a>獲取登錄賬號</h2> <el-form :model="kefuForm" :rules="rules" ref="kefuForm"> <el-form-item prop="username"> <el-input v-model="kefuForm.username" placeholder="用戶名"></el-input> </el-form-item> <el-form-item prop="password"> <el-input v-model="kefuForm.password" placeholder="密碼"></el-input> </el-form-item> <el-form-item> <el-button style="width: 100%" :loading="loading" type="primary" @click="kefuLogin('kefuForm')">登錄</el-button> </el-form-item> </el-form> <p class="copyright">陶士涵版權所有 © 2020 </p> </template> </div> </body>
