|
登錄界面如果要實(shí)現(xiàn)響應(yīng)式 , 需要注意寬度的設(shè)置和media query的使用 寬度一般都是按百分比設(shè)置,當(dāng)頁(yè)面中百分比也滿足不了的時(shí)候,可以使用media query區(qū)分出當(dāng)前屏幕的寬度 根據(jù)不同的屏幕寬度設(shè)置不同的css
例如下面gofly的這個(gè)登錄頁(yè) , 訪問(wèn)地址 : https://gofly./login
樣式部分 : 正常按照pc的樣式進(jìn)行開發(fā) , 然后再增加 @media (max-width: 768px) {} 在低于768px寬度的屏幕中 , 單獨(dú)設(shè)置樣式 <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的標(biāo)簽: <body> <div id="app" class="signin"> <template> <h1 class="loginTitle">賬戶登錄</h1> <h2 class="loginDesc">請(qǐng)聯(lián)系<a href="/chatIndex?kefu_id=kefu2">開發(fā)者</a>獲取登錄賬號(hào)</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">陶士涵版權(quán)所有 © 2020 </p> </template> </div> </body>
|
|
|
