[前端]GOFLY项目-响应式登录页的设计和实现

唯一Chat

发布于 2020-08-26 10:03:55

7570

发布于 2020-08-26 10:03:55

文章被收录于专栏：陶士涵的菜地陶士涵的菜地

登录界面如果要实现响应式 , 需要注意宽度的设置和media query的使用

宽度一般都是按百分比设置,当页面中百分比也满足不了的时候,可以使用media query区分出当前屏幕的宽度

根据不同的屏幕宽度设置不同的css

例如下面gofly的这个登录页 , 访问地址 : https://gofly.sopans.com/login

样式部分 :

正常按照pc的样式进行开发 , 然后再增加

@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">请联系<a href="/chatIndex?kefu_id=kefu2">开发者</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">陶士涵版权所有 &copy; 2020 </p>
</template>
</div>
</body>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-08-24 ，如有侵权请联系 cloudcommunity@tencent.com 删除

css