Question

对不起，如果已经问过这个问题，但是我搜索了一下，并且找不到任何希望有人可以提供帮助的事情。

我已经在心脏图像中制作了剧本，这是一个倒计时直到我结婚但我不能让它在iphone上调整大小。我已经尝试对齐它然后它抛出所有东西，没有任何排列。我的问题是..无论如何，我可以将脚本和图像保持在一起并整体排列使其响应？

我在下面添加了html和css，任何帮助都会受到赞赏..

非常感谢抱歉新手问题。

＆＃13;

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

＆＃13;

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

＆＃13;

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元素（你可以使用心脏背景，我没有这里），这是高度简化的，现在你的文字可以移动，调整大小等...并且背景将根据需要缩放和移动。它甚至随页面大小而扩展。但重要的是，对于移动设备，使用正确的视口标记，以便缩放实际上按预期工作：

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

使我的图像和脚本响应

1 个答案: