css - 使我的图像和脚本响应

Question

很抱歉，如果已经有人问过这个问题，但我进行了搜索但找不到任何东西，所以希望有人能提供帮助。

我已经在心形图像中制作了脚本，这是我结婚前的倒计时，但我无法在 iphone 上调整它的大小。我试过对齐它，但它会把所有东西都扔掉，没有任何东西排成一行。我的问题是……我是否可以将脚本和图像放在一起并将其作为一个整体排成一行，使其响应迅速？

我在下面添加了 html 和 css，如有任何帮助，我们将不胜感激。

非常感谢新手问题。

.countdown-wrap {
  width: 100%;
  height: 480px;
  position: relative;
  background: transparent url("../img/1/Heart.svg.png") no-repeat center center /contain;
}

#countdown {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: table;
}

#countdown p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: #000;
  font-family: Tangerine;
  font-size: 22px;
}

<div align="center" id="heart-countdown" class="heart-countdown container">
  <div class="countdown-wrap">
    <div id="countdown">

      <script>
        <!--// script goes here -->
        today = new Date();

        target = new Date("August 10, 2018");
        msPerDay = 24 * 60 * 60 * 1000;
        timeLeft = (target.getTime() - today.getTime());
        e_daysLeft = timeLeft / msPerDay;
        daysLeft = Math.floor(e_daysLeft);
        document.getElementById("countdown").innerHTML = "<p>There are only<br> <strong>" + daysLeft + " days </strong><br> until we are Mr and Mrs</p>";
      </script>
    </div>
  </div>
</div>

Answer 1

也许你可以稍微简化一下，我建议这样:

var today = new Date();
var target = new Date("August 10, 2018");
var msPerDay = 24 * 60 * 60 * 1000 ;
var timeLeft = (target.getTime() - today.getTime());
var e_daysLeft = timeLeft / msPerDay;
var daysLeft = Math.floor(e_daysLeft);

document.getElementById("countdown-output").innerHTML = daysLeft + ' days';

html, body {

  height: 100%;
  
}

#countdown {
  
  position: relative;
  max-width: 400px;
  text-align: center;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  color: #fff;
  font-size: 5vw;
  
}

#countdown strong {
  
  display: block;

}

#countdown:after {
  
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 100vw;
  max-width: 400px;
  content: '';
  height: 100vw;
  max-height: 400px;
  z-index: -1;
  background: red;
  background-size: contain;
  
}

<div id="countdown">
  There are only
  <strong id="countdown-output">0</strong>
  until we are Mr and Mrs
</div>

这里没有复杂的容器，只有文本和 after 元素(在这里你可以使用心形背景，我这里没有)，这是高度简化的，现在你文本可以移动、调整大小等......背景将根据需要缩放和移动。它甚至可以随页面大小缩放。不过，对于移动设备来说，重要的是使用正确的视口(viewport)标签，这样缩放实际上会按预期工作:

<meta name="viewport" content="width=device-width, initial-scale=1.0">