日韩黑丝制服一区视频播放|日韩欧美人妻丝袜视频在线观看|九九影院一级蜜桃|亚洲中文在线导航|青草草视频在线观看|婷婷五月色伊人网站|日本一区二区在线|国产AV一二三四区毛片|正在播放久草视频|亚洲色图精品一区

搜索
分享

[前端]GOFLY項(xiàng)目-響應(yīng)式登錄頁(yè)的設(shè)計(jì)和實(shí)現(xiàn)

 小世界的野孩子 2021-09-23

登錄界面如果要實(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)行開(kāi)發(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">賬戶(hù)登錄</h1>
        <h2 class="loginDesc">請(qǐng)聯(lián)系<a href="/chatIndex?kefu_id=kefu2">開(kāi)發(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="用戶(hù)名"></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)所有 &copy; 2020 </p>
</template>
</div>
</body>

 

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶(hù)發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買(mǎi)等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花（0）

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶(hù) 評(píng)論公約

    類(lèi)似文章 更多