专栏首页陶士涵的菜地[前端]GOFLY项目-响应式登录页的设计和实现

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

登录界面如果要实现响应式 , 需要注意宽度的设置和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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [javascript] 基于elementui的后台界面开发

    elementui是一套vuejs框架的ui库 , 主要逻辑是按照vuejs的组件方式来组合的

    陶士涵
  • [javascript] vuejs的elementui配合iframe实现页面跳转

    一般后台界面都有三大部分 , 顶部导航 , 左侧导航,右侧的主界面 . 点击左侧和顶部的导航 , 可以在右侧的主界面展示不同的界面

    陶士涵
  • [HTML] websocket的模拟日志监控界面

    模拟命令行的界面效果,使用swoole作为websocket的服务,重新做了下html的界面效果

    陶士涵
  • 实在是妙啊!Java中强软虚弱引用,居然还能这样去操作

    ThreadLocal 在什么情况下可能发生内存泄漏?如果你想清楚这个问题的来龙去脉,看源码是必不可少的,看了源码之后你发现, ThreadLocal 中用到 ...

    Java程序猿阿谷
  • iconfont关于content值的坑

    font-carrier是一个功能强大的字体操作库,使用它你可以随心所欲的操作字体。让你可以在svg的维度改造字体的展现形状。

    IMWeb前端团队
  • 十分钟搞定自动化构建 | 码云周刊第 57 期

    1. 项目名称:轻量级跨平台自动构建工具 xmake ? 项目简介:XMake 是一个基于 Lua 的轻量级跨平台自动构建工具,支持在各种主流平台上构建项目。...

    码云Gitee
  • iconfont关于content值的坑

    font-carrier是一个功能强大的字体操作库,使用它你可以随心所欲的操作字体。让你可以在svg的维度改造字体的展现形状。 //可以设置某个字对应的形状,当...

    IMWeb前端团队
  • XSS挑战第一期Writeup

    0×00起因 这期XSS挑战的起因是在阅读“Modern Web Application Firewalls Fingerprinting and By...

    FB客服
  • Android开发之 全局替换字体

    第一反应是好简单,换个TypeFace不就完了,但是不可能每个控件去设置一个吧?不存在的。

    Xiaolei123
  • 数据结构 | 每日一练(75)

    ——老子

    C语言入门到精通

扫码关注云+社区

领取腾讯云代金券