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

Question

我有一个小的目标网页，它仍然需要一些工作，但我会遇到线高o边缘或高度或垂直对齐问题。

每当我在桌面浏览器（chrome，firefox）上以响应模式试用它时，它显示正常但在移动设备上（safari和firefox for andoroid）它会中断。好像文本在移动设备上排在最前面，但我不知道如何解决它。

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;}
}

直到你对结果感到满意