div 在小屏幕上消失。
如果屏幕变小，该 Div 应该分两部分显示。
在小屏幕上，div 是不可见的。
Visit &看到倒计时，它在小屏幕上消失了。
如何解决？
代码在这里:-
<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>
请帮帮我!
最佳答案
根据您的要求，代码位于此处:-
<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>
希望我能帮到你!
关于html - div 在小屏幕上消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43915410/