0

我想寻求有关如何使倒数计时器响应的帮助。每次缩放窗口大小时，它仍会在中心的笔记本背景图像内对齐。我对媒体查询还不是很熟悉。另外，由于纸张设计嵌入在背景图像中，因此我发现将两者对齐很棘手。

（在编辑中添加了这个）我也忘了问和提到。在此代码中，它工作正常（几乎）。我只需要提到我在我的 css 上声明了其他 p{} 。所以我也想问我如何专门针对 .bg p{} ？因为看起来，我的 css 中的前一个 p{} 也会影响我正在处理的倒计时

这是代码 html

<div class="bg">
<p id="countdown"> </p>
</div>

css

.bg {
    background-image: url('http://thefeministmegaphone.com/wp-content/uploads/2016/12/893146-notebook-wallpaper.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
    position:fixed;
    width:100%;
    height:100%;
    left:0;
    top:0;
    text-align:center;
}
p#countdown {
    transform: rotate(-5deg);
    display:block;
    color: #333;
    font-size: 65px;
    font-family:times;
    margin: auto;
    width: 60%;
    padding: 10px;
    top:50%;
}
@media screen and (width: 800px) {
  .bg p {
    font-size: .8em;
  }

js

 // Set the date we're counting down to
var countDownDate = new Date("Oct 14, 2017 10:00:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

// Get todays date and time
var now = new Date().getTime();

// Find the distance between now an the count down date
var distance = countDownDate - now;

// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);

// Output the result in an element with id="countdown"
document.getElementById("countdown").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";

// If the count down is over, write some text 
if (distance < 0) {
    clearInterval(x);
    document.getElementById("countdown").innerHTML = "EXPIRED";
}
}, 1000);
4

3 回答 3

0

尝试更新css样式

.bg { ... background-size: cover; /* if dimension of element is not matching with image, else you can use 'contain' */ }

对于“p”

.bg > p {
position: relative;
color: #333;
font-size: 350%; // change font-size accordingly.
text-align: center;
margin: 0;
top: 40%; // change position accordingly
left: 50%; // change position accordingly
transform: rotate(-5deg) translate(-55%, -50%);

}

于 2017-10-12T06:20:01.223 回答
0

添加此附加代码

    <div class="bg">
    <p class="makecenter" id="countdown"> </p>
    </div>

CSS 更改：

.makecenter {
height: 150px;
width: 500px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -200px;

}

于 2017-10-12T05:57:21.007 回答
0

我在下面创建了一个可待因。

编解码器

这样做可能是更好的方法，但我使用百分比来获得正确的对齐方式并使用 em 测量字体。

您可以使用多个断点（1024 像素等）来调整大小以适应。

@media screen and (max-width: 768px) {
  .bg p {
    margin-top: 20%;
    font-size: 2em;
  }
于 2017-10-12T06:00:23.543 回答