如何让登录页面适配全屏幕？解决小屏幕welcome-message隐藏问题

问题说明 #

当前登录页面在大屏幕显示正常，但小屏幕下.welcome-message元素被隐藏，需调整为小屏幕下所有元素正常展示：顶部logo、标题自适应布局，欢迎消息完整显示，登录卡片保持居中适配。

修改后的完整代码 #

HTML代码 #

<body>
    <div class="logo-container">
        <img src="IMlogo.gif" alt="Logo" class="logo">
    </div>
    <div class="h2-container">
        <h2 style="color: #fff; font-family: Lato,Helvetica Neue,Helvetica,Arial,sans-serif; line-height: 1.53333">FS Pro Console</h2>
    </div>
    <div class="welcome-message">
        <h3 style="font-size: 1.125em">
            Welcome to the FS Pro Console. Here you can manage your licenses.
        </h3>
    </div>
    <div class="card">
        <h2 style="color: #009edf; font-family: Lato,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400">
            Log in to your IM Account
        </h2>
        <form>
            <div class="input-group">
                <input type="email" placeholder="Email address" required>
            </div>
            <div class="input-group">
                <input type="password" placeholder="Password" required>
            </div>
            <button type="submit" class="btn-login">Log in</button>
        </form>
    </div>
</body>

CSS代码 #

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #369ee3; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh; 
    position: relative;
    padding-top: 120px; /* 为顶部元素预留空间 */
}

.welcome-message {
    text-align: center;
    color: #fff;
    position: relative;
    margin: 20px 0;
    padding: 0 20px;
}

.card {
    background-color: #fff;
    border-radius: 8px;
    padding: 40px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    width: calc(100% - 80px); /* 减去左右内边距适配小屏幕 */
    text-align: center;
    margin: 20px 0;
}

.input-group {
    margin-bottom: 20px;
}

.input-group input {
    width: calc(100% - 20px); 
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 0 auto;
    outline-color: #009edf;
    border: 1px solid #009edf;
}

.btn-login {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: #3498db;
    color: #fff;
    cursor: pointer;
}

.btn-login:hover {
    background-color: #2980b9;
}

.logo-container {
    position: absolute;
    top: 20px;
    left: 20px;
}

.h2-container {
    position: absolute;
    top: 20px;
    right: 20px;
}

.logo {
    width: 100px; 
    height: auto;
}

/* 小屏幕适配规则 */
@media (max-width: 768px) {
    .logo-container, .h2-container {
        position: static;
        margin: 10px 0;
        text-align: center;
    }
    
    .logo {
        width: 80px;
    }
    
    body {
        padding-top: 20px;
    }
}

核心修改点 #

• 调整body的flex-direction为column，让页面元素垂直排列，避免小屏幕下垂直空间不足导致欢迎消息被挤压隐藏
• 将.welcome-message的定位从absolute改为relative，确保它在文档流中正常展示，同时添加左右内边距防止文字溢出屏幕
• 修改.card的宽度计算方式，适配小屏幕的窄宽度
• 添加媒体查询，在小屏幕下将顶部logo和标题容器改为静态定位并居中，缩小logo尺寸，调整body内边距优化布局

内容的提问来源于stack exchange，提问作者M Junaid