CSS3 Gradient и центрированный div стали адаптивными

Как мне сделать это отзывчивым? Я хочу, чтобы градиент и текст меняли размер и оставались центрированными при изменении размера экрана. Сейчас градиент будет время от времени повторяться, а шрифт останется прежним. Я хочу, чтобы первый раздел был 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>


html css responsive centering css-gradients
person Shalise    schedule 30.10.2017    source источник
comment
Использование вертикальной ширины, предложенной @Aaqib, устранило проблему со шрифтом. Однако градиент по-прежнему повторяется по вертикали, когда окно сужается.   -  person Shalise    schedule 31.10.2017
comment
@ Uğur_Erdal, отмечая h1 относительного расположения текста вверху страницы.   -  person Shalise    schedule 31.10.2017
comment
Я обновил его с помощью правильного Jsfiddle, надеюсь, теперь он решит вашу проблему :)   -  person Aaqib    schedule 31.10.2017

Ответы (2)


arrow_upward
1
arrow_downward

Вместо этого используйте 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

person Aaqib    schedule 30.10.2017

arrow_upward
0
arrow_downward

Вы должны использовать position: relative; вместо position: absolute;

Также введите этот код font-size: 3vw;

person Uğur Erdal    schedule 30.10.2017