Как разместить заголовок в CSS, чтобы сделать его более отзывчивым? - PullRequest
Новая
       5

Как разместить заголовок в CSS, чтобы сделать его более отзывчивым?

0 голосов
/ 07 февраля 2020

Я пытаюсь превратить этот дизайн в веб-сайт, используя CSS. Есть проблема, что насчет позиционирования заголовка "Горы ночью". Я пытался использовать position: absolute, и это отчасти работает, но на самом деле он не реагирует, когда я изменяю размер окна, так есть ли другой способ добиться этого?

enter image description here

Вот HTML: 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>

<!-- Background -->
<div class="bg">
        <!-- Menu -->
        <div class="menu">
            <a href="">about</a>
            <a href="">products</a>
            <a href="">team</a>
        </div>
            <h1 id="header">Mountains at night</h1>
</div>
</body>
</html>

Вот код CSS: 

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

/* Background image*/
.bg {
  /* The image used */
  background-image: url("header.jpg");

  /* Full height */
  height: 100%; 

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Menu */

.menu{
    position: absolute;
    margin-top:3%;
    margin-left:38%;
    word-spacing: 70px;
}

a{
  text-decoration: none;
}

#header{
  position: absolute;
  margin-top:12%;
  margin-left: 10%;
}

@media only screen and (max-width: 600px) {
  #header{
    position: absolute;
    margin-left: 15%;
    margin-top: 40%;
  }

  .menu{
    position: absolute;
    margin-top:3%;
    margin-left:25%;
    word-spacing: 30px;
}

Я пытался использовать медиазапрос, чтобы он выглядел лучше на маленьком экране, но это все еще выглядит странно.

1 Ответ

1 голос
/ 07 февраля 2020

Используйте css систему координат типа bootstrap. Прочитав немного документов, вы обнаружите, что пишете что-то вроде этого: 

<div class="container">
   <div class="row">
      <div class="col-md-6">
         <h1 id="header">Header</h1>
      </div>
      <div class="col-md-6"></div>
   </div>
</div>
...