适配小屏幕设备：网页背景渐变色彩布局问题咨询

问题描述 #

开发适配电脑、手机及小尺寸屏幕的响应式网站时，电脑端背景渐变显示正常，但手机/小屏幕设备上背景色彩布局不符合预期，需要让背景渐变（含中间黑色区域）根据屏幕宽度自适应扩展。

电脑端显示效果：
手机/小屏幕显示效果：

原代码 #

CSS代码 #

*{
  padding: 0;
  margin: 0;
}
body {
    background: linear-gradient(
    to right,
    yellow 0%,
    yellow 40%,
    black 41%,
    black 59%,
    purple 60%,
    purple 100%
  );
    display: flex;
    justify-content: center;
    text-align:center;
    overflow-y: hidden;
    overflow-x: hidden;
}
div.header {
    text-shadow: 2px 2px red;
    outline:5px dotted red;
    border-radius: 1000px;
    background: hsl(0 0% 100%);
    outline-offset:0px;
    max-width:550px;
    margin: auto;
    margin-top: 200px;
    display: flex;
    justify-content: center;
}
h1 {
    font-size:clamp(1rem, 0.8rem + 3vw, 3rem);
    margin: 5px;
}
.wrapper {
  min-height:100vh;
  display: flex;
  flex-direction:column;
  justify-content:space-around;
  align-items:center;
  max-width: 550px;
}

.top {
  width: 100%;
  display: grid;
}

HTML代码 #

<html>
<head>
<title>New Game.io</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div class="wrapper">
      <div class="top">
        <div class="header">
          <h1>New Game.io</h1>
         </div>
     </div>
  </div>
</body>
</html>

解决方案 #

问题根源是固定百分比的渐变断点在小屏幕下比例失衡，改用calc()结合vw单位实现自适应分割，确保各颜色区域比例在所有屏幕尺寸下一致。

修改后的CSS代码 #

*{
  padding: 0;
  margin: 0;
}
body {
    /* 用calc+vw实现自适应渐变分割，中间黑色区域占20vw宽度 */
    background: linear-gradient(
    to right,
    yellow 0%,
    yellow calc(50% - 10vw),
    black calc(50% - 10vw),
    black calc(50% + 10vw),
    purple calc(50% + 10vw),
    purple 100%
  );
    display: flex;
    justify-content: center;
    text-align:center;
    overflow-y: hidden;
    overflow-x: hidden;
    /* 确保背景覆盖整个视口宽度 */
    min-width: 100vw;
}
div.header {
    text-shadow: 2px 2px red;
    outline:5px dotted red;
    border-radius: 1000px;
    background: hsl(0 0% 100%);
    outline-offset:0px;
    max-width:550px;
    margin: auto;
    margin-top: 200px;
    display: flex;
    justify-content: center;
}
h1 {
    font-size:clamp(1rem, 0.8rem + 3vw, 3rem);
    margin: 5px;
}
.wrapper {
  min-height:100vh;
  display: flex;
  flex-direction:column;
  justify-content:space-around;
  align-items:center;
  max-width: 550px;
}

.top {
  width: 100%;
  display: grid;
}

修改说明 #

1. 渐变断点自适应：将固定百分比替换为calc(50% - 10vw)和calc(50% + 10vw)，中间黑色区域宽度固定为20vw（视口宽度的20%），左右黄色、紫色区域自动平分剩余宽度，在任何屏幕下都能保持布局比例。
2. 视口宽度覆盖：给body添加min-width: 100vw，确保背景完全覆盖屏幕宽度，避免小屏幕下出现横向空白。

内容的提问来源于stack exchange，提问作者Eun ji Gater