如何让登录页背景图适配不同屏幕尺寸？

问题根源分析 #

你的登录页面无法在手机屏幕完整显示，核心问题集中在以下几点：

• 登录容器.box设置了超大内边距padding:300px 300px，直接导致容器尺寸远超手机屏幕宽度
• 标题使用固定大字体font-size:45px，在小屏设备上易超出视口，搭配负margin进一步加剧内容偏移
• 登录按钮采用固定左右内边距padding:10px 135px，窄屏环境下会撑破容器
• HTML结构不符合规范，<footer>标签被放置在<body>外部

修改后的完整代码 #

HTML代码 #

<!DOCTYPE HTML>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
   <script src="components/loader.js"></script>
   <link rel="stylesheet" href="components/loader.css">
   <link rel="stylesheet" href="css/style.css">
   <script src="js/app.js"></script>
</head>
<body>
<div class="box">
   <form>
       <span class="text-center">ヘルスケア</span>
   <div class="input-container">
       <input type="text" id ="userName" required=""/>
       <label>ユーザ名</label>     
   </div>
   <div class="input-container">       
       <input type="password" id ="password" required=""/>
       <label>パスワード</label>
   </div >
       <div class="center">
           <button onclick="login()" type="button" class="btn">ログイン</button>
       </div>
       <div class="center">
           <a id="reset" href="reset.html">パスワードを忘れた方はこちら</a>
       </div>
       <div class="regText">
           <p>アカウントを持ちでない場合はこちらから</p>
       </div>
       <div class="center">
           <a id ="register" href="login.html">アカウントを新規登録</a>
       </div>
   </form> 
</div>
<footer>
   <div class="copyright"> © 2022 Copyright by Company Name. All Rights Reserved. </div>
</footer>
</body>
</html>

CSS代码 #

@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i&subset=greek-ext');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-image: url("https://images.pexels.com/photos/6455924/pexels-photo-6455924.jpeg?cs=srgb&dl=pexels-julia-larson-6455924.jpg&fm=jpg&_gl=1*pg770f*_ga*MTc4NzcyMDU0OS4xNjY3OTE4NjQz*_ga_8JE65Q40S6*MTY2NzkxODY0My4xLjEuMTY2NzkyMDUxOC4wLjAuMA..");
    background-position: center;
    background-origin: content-box;
    background-repeat: no-repeat;
    background-size: cover;
    min-height:100vh;
    font-family: 'Noto Sans', sans-serif;
    padding: 20px;
}
.text-center{
    color:#fff; 
    text-transform:uppercase;
    font-size: clamp(24px, 5vw, 45px);
    margin: 0 0 40px 0;
    display: block;
    text-align: center;
}
.box{
    position:relative;
    max-width: 350px;
    width: 100%;
    margin: 50px auto 0;
    background-color: rgba(0,0,0, 0.5); 
    border-radius:3px;
    padding: 40px 25px;
}
.input-container{
    position:relative;
    margin-bottom:25px;
}
.input-container label{
    position:absolute;
    top:0px;
    left:0px;
    font-size:16px;
    color:#fff; 
    pointer-events:none;
    transition: all 0.3s ease-in-out;
}
.input-container input{ 
  border:0;
  border-bottom:1px solid #555;  
  background:transparent;
  width:100%;
  padding:25px 0 0 0;
  font-size:20px;
  color:#fff;
}
.input-container input:focus{ 
 border:none;   
 outline:none;
 border-bottom:2px solid #e74c3c;   
}
.btn{
    color:#fff;
    background-color:#e74c3c;
    outline: none;
    border: 0;
    padding:12px 40px;
    width: 100%;
    text-transform:uppercase;
    margin-top:20px;
    border-radius:10px;
    cursor:pointer;
    font-size: 16px;
}
.input-container input:focus ~ label,
.input-container input:valid ~ label{
    top:-12px;
    font-size:12px;
}
a#reset{
    margin-top: 10px ;
    font-size: 14px;
    color: yellow;
    text-align: center;
    display: block;
    margin-bottom: 30px;
}
a#register{
    font-size: 14px;
    color: yellow;
    text-align: center;
    display: block;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center; 
  height: auto;
}
.regText {
    margin: 30px 0 20px 0; 
    color: #ffffff;
    text-align: center;   
}
footer{
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 12px;
}
.copyright{
    text-align: center;
}

关键修改说明 #

1. 全局样式重置：添加* { margin:0; padding:0; box-sizing:border-box; }，消除默认内外边距干扰，确保元素尺寸计算准确
2. 登录容器适配：
   • 将.box的超大内边距改为padding:40px 25px，缩小容器整体尺寸
   • 改用相对布局position:relative+margin:0 auto实现居中，替代绝对定位避免小屏溢出
   • 设置max-width:350px+width:100%，确保容器在窄屏自动适配宽度
3. 响应式字体：标题使用clamp(24px,5vw,45px)实现动态字体大小，小屏自动缩小
4. 按钮适配：按钮设置width:100%，确保在任何宽度下都能填满容器且不溢出
5. 链接样式修正：去掉无效的float:center，改用display:block+text-align:center实现居中
6. 页脚修正：将footer移到body内部，改为固定定位在底部，避免遮挡内容同时适配小屏显示

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