html自适应登录页面

Ayo
173 阅读9分钟

原视频：https://www.bilibili.com/video/BV1Kh411M779/?spm_id_from=333.880.my_history.page.click

页面展示

image.png

image.png

image.png

image.png

html代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <!-- <meta name="viewport" id="viewportMeta" /> -->
        <title>太空风自适应登录页面</title>
        <link rel="stylesheet" href="./css/index.css" />
        <script src="./js/index.js"></script>
    </head>
    <body>
        <div class="container" id="login-page">
            <div class="login-wrapper">
                <!-- 左边格言显示 -->
                <div class="left-img">
                    <div class="glass">
                        <div class="tips">
                            <div class="title">青玉案</div>
                            <h2>凌波不过横塘路</h2>
                            <span>宋·贺铸</span>
                            <br />
                            <span>凌波不过横塘路，但目送、芳尘去。</span>
                            <span>锦瑟华年谁与度？</span>
                            <span>月桥花院，琐窗朱户，只有春知处。</span>
                            <br />
                            <span>飞云冉冉蘅皋暮，彩笔新题断肠句。</span>
                            <span>试问闲情都几许？</span>
                            <span>一川烟草，满城风絮，梅子黄时雨。</span>
                        </div>
                    </div>
                </div>
                <!-- 右边登录主要功能 -->
                <div class="right-login-form">
                    <div class="from-wrapper">
                        <h1>登录页面</h1>
                        <div class="input-items">
                            <span class="input-tips"> 账号 </span>
                            <input type="text" class="inputs" placeholder="请输入您的账号" />
                        </div>
                        <div class="input-items">
                            <span class="input-tips"> 密码 </span>
                            <input type="password" class="inputs" placeholder="请输入您的密码" />

                            <span class="forgot">忘记密码?</span>
                        </div>
                        <button class="btn">登录</button>
                        <div class="siginup-tips">
                            <span>没有账号?</span>
                            <span>注册</span>
                        </div>
                        <div class="other-login">
                            <div class="divider">
                                <span class="line"></span>
                                <span class="divider-text">or</span>
                                <span class="line"></span>
                            </div>
                            <div class="other-login-wrapper">
                                <div class="other-login-item">
                                    <img src="./resource/img/icon/QQ.png" alt="" />
                                </div>
                                <div class="other-login-item">
                                    <img src="./resource/img/icon/WeChat.png" alt="" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

css代码

@font-face {
    font-family: 'FZFWZhuZiAYuanJWD';
    src: url('../resource/font/FZFWZhuZiAYuanJWD.TTF');
}

* {
    padding: 0px;
    margin: 0px;
    /* font-family: "Aguazyuan", Courier, monospace; */
    font-family: 'FZFWZhuZiAYuanJWD';
    box-sizing: border-box;
}

::selection {
    background-color: rgb(110, 87, 179);
}

/*去除ie edge的密码框默认出现的小眼睛
		给人添乱这一块，巨硬从来都没让我失望过*/
input[type='password']::-ms-reveal {
    display: none;
}

input[type='password']::-ms-clear {
    display: none;
}

input[type='password']::-o-clear {
    display: none;
}

body {
    /* 移除默认蓝色的背景 */
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
    height: 100vh;
    background-color: rgb(186, 175, 221);
}

/* ---------------------------------------------------------- */
#login-page {
    width: 100vw;
    height: 100%;
    /* background-color: rgb(186, 175, 221); */
    position: relative;

    background: url('../resource/img/left.jpg') no-repeat;
    background-size: cover;
    position: relative;
    background-position: center;
    user-select: none;

    /* 定义全局的变量 
	******************************/
    /* 基本字体颜色 */
    --baseFontColor: rgba(0, 0, 0, 1);
    /* 提示文本颜色(可点击的文本) */
    --baseTipsFontColor: rgb(110, 87, 179);
    /* 提示文本点击之后的颜色(可点击的文本) */
    --baseTipsActiveFontColor: rgb(136, 108, 222);
    /* input默认的边框颜色 */
    --inputDomBorderColor: rgb(227, 227, 227);
    /* input元素聚焦时线条的颜色 */
    --inputDomFocusBorderColor: rgb(128, 106, 196);
    /* input文本颜色 */
    --inputDomFontColor: rgba(0, 0, 0, 1);
    /* input提示文本颜色 */
    --inputDomPlaceholderFontColor: rgba(117, 117, 117, 1);
    /* input元素投影样式 */
    --inputDomBoxShadow: unset;
    /* 基本的元素投影样式 */
    --baseDomBoxShadow: 0px 8px 32px 0px rgba(31, 38, 138, 0.37);
    /* 按钮背景色 */
    --baseBtnBgColor: rgb(128, 106, 196);
    /* 按钮点击之后的颜色 */
    --baseBtnActiveBgColor: rgba(140, 115, 217);
    /* or颜色 */
    --baseTipOrColor: rgb(167, 172, 185);
}

#login-page > .login-wrapper {
    width: 60vw;
    height: 80%;
    /* height: 80vh; */
    background-color: #fff;
    border-radius: 40px;
    /* 设置位置 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*  */
    display: flex;

    overflow: hidden;
    z-index: 99;
}

/* 左边
 **************************/
#login-page > .login-wrapper > .left-img {
    border-radius: 40px;
    flex: 1;
    background: url('../resource/img/left.jpg') no-repeat;
    background-size: cover;
    position: relative;
    background-position: center;

    cursor: default;
}

#login-page > .login-wrapper > .left-img > .glass {
    color: white;
    width: 86%;
    padding: 20px;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -20%);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: var(--baseDomBoxShadow);
    /* 背景毛玻璃 */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.48);

    user-select: text;
}

#login-page > .login-wrapper > .left-img > .glass > .tips > .title {
    /* width: 15%; */
    display: inline-block;
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    padding: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: var(--baseDomBoxShadow);
    /* 背景毛玻璃 */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.48);
}

#login-page > .login-wrapper > .left-img > .glass > .tips > h2 {
    margin: 15px 0px;
}

#login-page > .login-wrapper > .left-img > .glass > .tips > span {
    margin: 5px 0;
    display: block;
}

/* 右边
 **************************/
#login-page > .login-wrapper > .right-login-form {
    flex: 1;
    position: relative;
    overflow: hidden;
}

#login-page > .login-wrapper > .right-login-form > .from-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#login-page > .login-wrapper > .right-login-form > .from-wrapper > h1 {
    font-size: 30px;
    text-align: center;
    color: var(--baseFontColor);
}

#login-page > .login-wrapper > .right-login-form > .from-wrapper > .input-items {
    /* margin: 20px 0px; */
    color: var(--baseFontColor);
}

#login-page > .login-wrapper > .right-login-form > .from-wrapper > .input-items > .input-tips {
    display: inline-block;
    font-weight: 600;
    font-size: 20px;
    margin: 10px 0;
}

#login-page > .login-wrapper > .right-login-form > .from-wrapper > .input-items > .inputs {
    width: 100%;
    height: 50px;
    border-radius: 10px;
    border: 1px solid var(--inputDomBorderColor);
    padding: 20px;
    outline: none;
    box-sizing: border-box;
    transform: 0.5s;
    color: var(--inputDomFontColor);
    /* text-shadow: 0 0 2px rgba(0, 0, 0, 1); */
}

#login-page
    > .login-wrapper
    > .right-login-form
    > .from-wrapper
    > .input-items
    > .inputs::placeholder {
    color: var(--inputDomPlaceholderFontColor);
}

#login-page > .login-wrapper > .right-login-form > .from-wrapper > .input-items > .inputs:focus {
    border: 1px solid var(--inputDomFocusBorderColor);
    box-shadow: var(--inputDomBoxShadow);
}

#login-page > .login-wrapper > .right-login-form > .from-wrapper > .input-items > .forgot {
    float: right;
    font-weight: 600;
    text-align: right;
    margin: 5px 0px;
    font-size: 13px;
    cursor: pointer;
    color: var(--baseTipsFontColor);
}

#login-page > .login-wrapper > .right-login-form > .from-wrapper > .input-items > .forgot:active {
    color: var(--baseTipsActiveFontColor);
}

#login-page > .login-wrapper > .right-login-form > .from-wrapper > .btn {
    width: 100%;
    height: 50px;
    background: var(--baseBtnBgColor);
    border: 0;
    border-radius: 10px;
    color: white;
    font-size: 25px;
    margin: 20px 0;
    cursor: pointer;
}

#login-page > .login-wrapper > .right-login-form > .from-wrapper > .btn:active {
    background: var(--baseBtnActiveBgColor);
}

#login-page > .login-wrapper > .right-login-form > .from-wrapper > .siginup-tips {
    text-align: center;
    font-weight: 600;
    margin: 10px 0;
    color: var(--baseFontColor);
}

#login-page > .login-wrapper > .right-login-form > .from-wrapper > .siginup-tips span:last-child {
    color: var(--baseTipsFontColor);
    cursor: pointer;
}

#login-page
    > .login-wrapper
    > .right-login-form
    > .from-wrapper
    > .siginup-tips
    span:last-child:active {
    color: var(--baseTipsActiveFontColor);
}

#login-page > .login-wrapper > .right-login-form > .from-wrapper > .other-login > .divider {
    width: 100%;
    margin: 20px 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#login-page > .login-wrapper > .right-login-form > .from-wrapper > .other-login > .divider > .line {
    display: inline-block;
    max-width: 35%;
    width: 35%;
    flex: 1;
    height: 1px;
    background-color: var(--baseTipOrColor);
}

#login-page
    > .login-wrapper
    > .right-login-form
    > .from-wrapper
    > .other-login
    > .divider
    > .divider-text {
    vertical-align: middle;
    margin: 0 10px;
    display: inline-block;
    width: 50px;
    color: var(--baseTipOrColor);
    white-space: nowrap;
}

#login-page
    > .login-wrapper
    > .right-login-form
    > .from-wrapper
    > .other-login
    > .other-login-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#login-page
    > .login-wrapper
    > .right-login-form
    > .from-wrapper
    > .other-login
    > .other-login-wrapper
    > .other-login-item {
    width: 80px;
    padding: 6px 12px;
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    color: rgb(51, 59, 116);
    margin: 0 10px;
    transform: 0.4s;
    box-sizing: border-box;
    border: 1px solid transparent;
}

#login-page
    > .login-wrapper
    > .right-login-form
    > .from-wrapper
    > .other-login
    > .other-login-wrapper
    > .other-login-item
    img {
    width: 40px;
    height: 40px;
    vertical-align: middle;
}

#login-page
    > .login-wrapper
    > .right-login-form
    > .from-wrapper
    > .other-login
    > .other-login-wrapper
    > .other-login-item:hover {
    height: 50%;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0);
    box-shadow: 1px 10px 32px 1px rgba(186, 175, 211, 0.37);
}

#login-page
    > .login-wrapper
    > .right-login-form
    > .from-wrapper
    > .other-login
    > .other-login-wrapper
    > .other-login-item:active {
    box-shadow: 1px 10px 32px 1px rgba(186, 175, 211, 0.6);
}

/* 媒体查询
 * 超小屏幕     手机        <768px
 * 小屏幕       平板        >=768px ~ <992px  
 * 中等屏幕      桌面       >=992px ~ <1200px
 * 大屏幕       桌面        >=1200px  
 **************************************************/
/* 大屏幕  大于1200px*/
@media screen and (max-width: 1200px) {
}

/* 中等屏幕  992px - 1200px*/
@media screen and (max-width: 900px) {
    #login-page {
        /* 定义全局的变量
		******************************/
        /* 基本字体颜色 */
        --baseFontColor: rgba(255, 255, 255, 1);
        /* 提示文本颜色(可点击的文本) */
        --baseTipsFontColor: rgba(185, 162, 255, 1);
        /* input默认的边框颜色 */
        --inputDomBorderColor: rgba(0, 0, 0, 0.06);
        /* input元素聚焦时线条的颜色 */
        /* --inputDomFocusBorderColor: rgb(165, 138, 255); */
        --inputDomFocusBorderColor: rgb(255, 255, 255);
        /* input提示文本颜色 */
        --inputDomPlaceholderFontColor: rgba(255, 255, 255, 0.5);
        /* input文本颜色 */
        --inputDomFontColor: rgba(255, 255, 255);
        --inputDomBoxShadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.37);
        --baseTipOrColor: rgba(255, 255, 255);
    }

    #login-page > .login-wrapper {
        padding: 20px;
        /* height: 70vh; */
        height: 70%;
        background: rgba(0, 0, 0, 0.1);
        box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
        border: 1px solid rgba(255, 255, 255, 0.48);
    }

    #login-page > .login-wrapper > .left-img {
        display: none;
    }

    #login-page > .login-wrapper > .right-login-form {
        padding: 20px;
    }

    #login-page > .login-wrapper > .right-login-form > .from-wrapper {
        width: 80%;
    }

    #login-page > .login-wrapper > .right-login-form > .from-wrapper > .input-items > .input-tips {
        font-size: 16px;
        margin: 8px 0;
    }

    #login-page > .login-wrapper > .right-login-form > .from-wrapper > .input-items > .inputs {
        padding: 0px 30px;
        height: 40px;
        background-color: rgba(0, 0, 0, 0.06);
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
    }

    #login-page > .login-wrapper > .right-login-form > .from-wrapper > .btn {
        height: 40px;
        margin: 10px 0;
        font-size: 20px;
    }

    #login-page > .login-wrapper > .right-login-form > .from-wrapper > .siginup-tips {
        font-size: 14px;
    }

    #login-page > .login-wrapper > .right-login-form > .from-wrapper > .other-login > .divider {
        margin: 10px 0;
    }

    #login-page
        > .login-wrapper
        > .right-login-form
        > .from-wrapper
        > .other-login
        > .other-login-wrapper
        > .other-login-item {
        width: 80px;
        padding: 2px 12px;
    }

    #login-page
        > .login-wrapper
        > .right-login-form
        > .from-wrapper
        > .other-login
        > .other-login-wrapper
        > .other-login-item
        img {
        width: 30px;
        height: 30px;
    }

    #login-page
        > .login-wrapper
        > .right-login-form
        > .from-wrapper
        > .other-login
        > .other-login-wrapper
        > .other-login-item:hover {
        /* background: rgba(255, 255, 255, 0.34); */
        background: transparent;
        /* box-shadow: 0px 8px 32px 0px rgba(255, 255, 255, 0.37); */
        box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0);
        /* 背景毛玻璃 */
        /* backdrop-filter: blur(1px); */
        /* -webkit-backdrop-filter: blur(1px); */
        /* border: 1px solid rgba(255, 255, 255, 0.48); */
    }

    #login-page
        > .login-wrapper
        > .right-login-form
        > .from-wrapper
        > .other-login
        > .other-login-wrapper
        > .other-login-item:active {
        background: rgba(255, 255, 255, 0.6);
    }
}

/* 小屏幕  768px-992px  屏幕宽度在768px以上显示的颜色*/
@media screen and (max-width: 768px) {
    #login-page > .login-wrapper {
        /* height: 50vh; */
        height: 50%;
        padding: 0px;
        width: 70vw;
    }

    #login-page > .login-wrapper > .right-login-form {
        height: 100%;
    }

    #login-page > .login-wrapper > .right-login-form > .from-wrapper {
        padding: 20px;
        position: relative;
        width: 90%;
    }

    #login-page > .login-wrapper > .right-login-form > .from-wrapper > h1 {
        font-size: 20px;
    }

    #login-page > .login-wrapper > .right-login-form > .from-wrapper > .input-items > .input-tips {
        margin: 4px 0;
    }

    #login-page > .login-wrapper > .right-login-form > .from-wrapper > .input-items > .inputs {
        height: 36px;
    }

    #login-page > .login-wrapper > .right-login-form > .from-wrapper > .btn {
        height: 36px;
        margin: 4px 0;
        font-size: 18px;
    }

    #login-page > .login-wrapper > .right-login-form > .from-wrapper > .siginup-tips {
        margin: 6px 0;
    }

    #login-page > .login-wrapper > .right-login-form > .from-wrapper > .other-login > .divider {
        margin: 4px 0;
    }
}

@media screen and (max-width: 520px) {
    #login-page > .login-wrapper {
        padding: 0px;
        width: 90vw;
    }

    #login-page > .login-wrapper > .right-login-form > .from-wrapper {
        width: 100%;
    }

    #login-page
        > .login-wrapper
        > .right-login-form
        > .from-wrapper
        > .other-login
        > .other-login-wrapper
        > .other-login-item
        img {
        height: 26px;
        width: 26px;
    }
}

js代码

由于页面使用的vh单位，在移动端调用输入法时会导致页面坍塌，需要js在页面加载时直接获取一次显示区高度，写死body的高

//防抖对象 => 页面尺寸变化会多次触发监听函数
let timer = null;

/* 移动端键盘会导致vh坍塌 => 直接在元素一开始加载完成获得页面高度，然后写死body的高度 */
document.addEventListener('DOMContentLoaded', function () {
    let Height = document.body.offsetHeight;
    setContionerSize(Height);
    window.onresize = function () {
        !timer &&
            (timer = setTimeout(function () {
                setContionerSize(Height);
                timer = null;
            }, 300));
    };
});

function setContionerSize(Height) {
    document.body.style.height = Height + 'px';
}

其他

源码地址：gitee.com/CnAyo/login… 演示地址：code.juejin.cn/pen/7371502…

avatar
文章
阅读
粉丝