CSS3 渐变和居中的 div 做出响应答案

【问题标题】：CSS3 Gradient and a Centered div Made ResponsiveCSS3 渐变和居中的 div 做出响应
【发布时间】：2017-10-31 05:50:30
【问题描述】：

如何使这个响应？我希望渐变和文本随着屏幕大小的变化而调整大小并保持居中。现在，渐变会不时重复，字体保持不变。我希望第一部分是 100vh，第二部分（还没有标记）不应该有渐变。

https://codepen.io/Shalise/pen/QOwbZJ

html {
  height: 100%;
  margin: 0;
}
    
h1 {
  width: 100%;
  top: 50%;
  left: 0;
  line-height: 200px;
  margin-top: -100px;
  position: absolute;
  text-align: center;
  font-family: Raleway;
  color: white;
  font-size: 3em;
}
    
body {
  background: #ff7043; /* For browsers that do not support gradients */    
  background: -webkit-linear-gradient(left top, #ff7043, #ffc17); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, #ff7043, #300032); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, #ff7043, #300032); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, #f79f79, #f7d08a); /* Standard syntax (must be last) */
}

<section id="gradient">
  <h1>The Sun Will Come Out Tomorrow</h1>
</section>

【问题讨论】：

使用@Aaqib 建议的垂直宽度修复了字体问题。但是，当窗口变窄时，渐变仍会垂直重复。
@Uğur_Erdal，将 h1 相对位置标记为页面顶部的文本。
我已经用正确的 Jsfiddle 更新了它，希望现在它可以解决你的问题 :)

标签： html css responsive centering css-gradients

【解决方案1】：

请改用vw，所以

html, body {
  height: 100vw;
  margin: 0;
}

和

h1 {
  width: 100%;
  top: 50%;
  left: 0;
  line-height: 200px;
  margin-top: -100px;
  position: absolute;
  text-align: center;
  font-family: Raleway;
  color: white;
  font-size: 3vw;
}

当窗口在主体内变窄时停止渐变垂直重复使用：

body{
 background-repeat: no-repeat;
 background-attachment: fixed;
}

这里是更新：Jsfiddle

【讨论】：

【解决方案2】：

您应该使用position: relative; 而不是position: absolute;

也放上这个代码font-size: 3vw;

【讨论】：

【解决方案3】：

    html, body {
      height: 100vw;
      margin: 0;
    }

    h1 {
      width: 100%;
      top: 50%;
      left: 0;
      line-height: 200px;
      margin-top: -100px;
      position: absolute;
      text-align: center;
      font-family: Raleway;
      color: white;
      font-size: 2vw;
    }

    body {
        background: #ff7043; /* For browsers that do not support gradients */    
    }

    #sun {
      width: 100vw;
      height: 100vh;
      background: -webkit-linear-gradient(left top, #ff7043, #ffc17); /* For Safari 5.1 to 6.0 */
      background: -o-linear-gradient(bottom right, #ff7043, #300032); /* For Opera 11.1 to 12.0 */
      background: -moz-linear-gradient(bottom right, #ff7043, #300032); /* For Firefox 3.6 to 15 */
      background: linear-gradient(to bottom right, #f79f79, #f7d08a); /* Standard syntax (must be last) */
    }

<section id="sun">
    <h1>The Sun Will Come Out Tomorrow</h1>
</section>

【讨论】：