Question

在小屏幕上消失div。

如果屏幕变小，那么Div应该以两部分显示。

在小屏幕中，div不可见。

Visit＆amp;看到倒计时，它就会在小屏幕上消失。

如何解决？

代码在这里： -

<html>
<head>
<title>
Maintenance in Progress
</title>
<style>
.timer {
  font-size: 60px;
  color: white;
  position: fixed;
  right: 500px;
  bottom: 0;
}
body {
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.utxt{
    position: fixed;
    width: 100%;
}
.circle{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.dtxt{
    position: absolute;
    bottom: 0;
    width: 30%;
}

</style>
</head>
<body background="maintenance/bg.png">
<img class="utxt" src="maintenance/utxt.png"></img>
<img class="circle" src="maintenance/circle.png"></img>
<img class="dtxt" src="maintenance/dtxt.png"></img>
<div class="timer" id="demo"></div>

<script>
// Set the date we're counting down to
var countDownDate = new Date("May 19, 2017 00: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="demo"
    document.getElementById("demo").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("demo").innerHTML = "EXPIRED";
    }
}, 1000);
</script>

</body>
</html>

请帮助我！

Answer 1

根据您的要求，代码在此处： -

<html>
<head>
<title>
Maintenance in Progress
</title>
<style>
.timer {
  font-size: 60px;
  color: white;
  position: fixed;
  right: 500px;
  bottom: 0;
}
.stimer {                   <!--added-->
  font-size: 60px;
  color: white;
  position: fixed;
  right: 500px;
  bottom: 60px;
}
.bstimer {                  <!--added-->
  font-size: 60px;
  color: white;
  position: fixed;
  right: 500px;
  bottom: 0;
}
body {
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.utxt{
    position: fixed;
    width: 100%;
}
.circle{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.dtxt{
    position: absolute;
    bottom: 0;
    width: 30%;
}
@media (max-width: 900px) {             <!--added-->
    .timer {
       display: none;
    }
    .stimer {
       right:0;
    }
    .bstimer {
       right:0;
    }
}
@media (min-width: 900px) {         <!--added-->
    .stimer {
       display: none;
    }
    .bstimer {
       display: none;
    }
}
</style>
</head>
<body background="maintenance/bg.png">
<img class="utxt" src="maintenance/utxt.png"></img>
<img class="circle" src="maintenance/circle.png"></img>
<img class="dtxt" src="maintenance/dtxt.png"></img>
<div class="timer" id="demo"></div>
<div class="stimer" id="sdemo"></div></br>          <!--added-->
<div class="bstimer" id="bsdemo"></div>             <!--added-->

<script>
// Set the date we're counting down to
var countDownDate = new Date("May 19, 2017 00: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="demo"
    document.getElementById("demo").innerHTML = days + "d " + hours + "h "
    + minutes + "m " + seconds + "s ";

    // Output the result in an element with id="sdemo"                  (added)
    document.getElementById("sdemo").innerHTML = days + "d " + hours + "h ";

    // Output the result in an element with id="bsdemo"                 (added)
    document.getElementById("bsdemo").innerHTML = minutes + "m " + seconds + "s ";

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

</body>
</html>

希望我能帮助你！

Answer 2

右移：500并固定位置!!它将你的时钟推到屏幕外面!!
使其居中：

display:table
margin: auto

尝试：

<img class="circle" src="maintenance/circle.png">
<div class ="bottomLine">
    <img class="dtxt" src="maintenance/dtxt.png">
    <div class="timer" id="demo">7d 9h 21m 35s </div>
</div>

尝试将dtxt和计时器放在一起（显示：inline或sth。）然后将“bottomLine”设置为居中，例如和bottom：0。不要使用固定位置，以防止彼此重叠div：）

Answer 3

这是因为你给了倒计时right:500;，你需要在这样的小屏幕上删除它：

@media (max-width: 900px) {
    .timer {
       right:0;
    }
}

注意：您必须将其放在样式表的底部

Answer 4

这是由CSS中的right: 500px;引起的。将其更改为百分比或为较小的屏幕添加媒体查询，以便您可以根据需要进行调整。

Answer 5

不要使用right: 500px。如果您的屏幕宽度为500px或更小，则div会超出范围。（有道理，对吗？）如果您希望您的网站具有响应能力，请不要使用绝对值。而是做这样的事情：

.timer {
    margin: auto;
}

Answer 6

试试这个它适用于所有屏幕

.timer {
        text-align: center;
        font-size: 60px;
        color: white;
        position: absolute;
        right: 50%;/*change*/
        bottom: 0;
        margin-right: -181px;/*change*/
    }

Answer 7

将位置：固定更改为位置：绝对

在小屏幕上消除div

7 个答案: