桌面显示器上的响应模式与移动设备上的不同

Question

我有一个小的目标网页，它仍然需要一些工作，但我遇到了 line-height o margin 或 height 或 vertical-align 问题。

每当我在响应模式下的桌面浏览器（chrome、firefox）上尝试它时，它显示正常，但在移动设备（safari 和适用于 Android 的 firefox）上它会中断。好像文字在移动设备上对齐，但我不知道如何解决。

HTML

<section id="main-1">
<div class="container">
    <div id="claim">
        <h1>Bono de bienvenida</h1>
        <p class="huge">300€</p>
        <p>parajugar a casino</p>
        <p class="smaller">con el código: experto</p>
    </div>
</div>

SCSS

$proportion: 9vmin;

#main-1 {
  position: relative;
  height: 600px;
  max-height: 80vh;
  min-height: 300px;
  background-image: url('/dist/assets/img/img_768x1024.jpg');
  background-size: cover;
  background-position: 50%;

  .container {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
  }

  #claim {
    background-image: linear-gradient(to left,
            rgba(0, 0, 0, 0),
            rgba(0, 0, 0, 0.45) 15%,
            rgba(0, 0, 0, 0.46) 85%,
            rgba(0, 0, 0, 0) 100%);
    font-size: $proportion * 12 / 12;
    line-height: $proportion * 12 / 12;
    text-transform: uppercase;
    padding: 1rem 0;
    margin-top: 0;


    .huge {
      font-size: $proportion * 55 / 12;
      line-height: $proportion * 39 / 12;
      margin-bottom: 0;

    }

    .smaller {
      font-size: $proportion * 6 / 12;
      text-transform: lowercase;
      line-height: $proportion * 4 / 12;
    }

  }
}

你可以在http://bienvenida.casinobarcelona.es看到它的直播

您在响应模式下在桌面上看到的内容

您在移动设备上实际看到的内容

Answer 1

尝试为此使用媒体查询：

@media screen and (max-width: 544px) {
#claim {line-height:2vw;} /* wanted line height etc */
.huge  {line-height:2vw;}
}

直到你对结果满意为止