Html 小屏幕上的div消失_Html_Css

Html 小屏幕上的div消失

html css

Html 小屏幕上的div消失,html,css,Html,Css,小屏幕上的div消失如果屏幕变小，该Div应分两部分显示在小屏幕中，div不可见 &请参阅倒计时，它将在小屏幕上消失如何修复它代码如下：- <html> <head> <title> Maintenance in Progress </title> <style> .timer { font-size: 60px; color: white; position: fixed; right: 500px; bo

小屏幕上的div消失

如果屏幕变小，该Div应分两部分显示

在小屏幕中，div不可见

&请参阅倒计时，它将在小屏幕上消失

如何修复它

代码如下：-

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


正进行保养
.计时器{
字体大小：60px；
颜色：白色；
位置：固定；
右：500px；
底部：0；
}
身体{
背景重复：无重复；
背景大小：100%100%；
}
.utxt{
位置：固定；
宽度：100%；
}
.圆圈{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.dtxt{
位置：绝对位置；
底部：0；
宽度：30%；
}
//确定我们倒计时的日期
var countDownDate=新日期（“2017年5月19日00:00:00”）.getTime（）；
//每1秒更新一次倒计时
var x=setInterval（函数（）{
//获取今天的日期和时间
var now=new Date（）.getTime（）；
//找出现在和倒计时日期之间的距离
var距离=倒计时日期-现在；
//天、小时、分钟和秒的时间计算
变量天数=数学楼层（距离/（1000*60*60*24））；
可变小时数=数学楼层（（距离%（1000*60*60*24））/（1000*60*60））；
var分钟=数学楼层（（距离%（1000*60*60））/（1000*60））；
var秒=数学楼层（（距离%（1000*60））/1000）；
//在id=“demo”的元素中输出结果
document.getElementById（“demo”）.innerHTML=days+d+hours+h
+分钟+米+秒+秒；
//如果倒计时结束，写一些文字
如果（距离<0）{
净间隔（x）；
document.getElementById（“demo”）.innerHTML=“过期”；
}
}, 1000);

请帮帮我

拆下右侧：500和固定位置！！它会把你的时钟推到屏幕外面
要使其居中：

display:table
margin: auto

尝试：


7d 9h 21m 35s

试着将dtxt和定时器保持在一起（显示：内联或其他），然后将“底线”设置为中心，例如和底部：0。不要使用固定位置，以防止相互重叠的div:）

这是因为您将倒计时设置为正确的：500，您需要在以下较小屏幕上删除此选项：

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

.timer {
    margin: auto;
}

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

将您的位置：固定更改为位置：绝对这是由

右侧：500px引起的在CSS中。
将其更改为百分比或为较小屏幕添加媒体查询，以便您可以根据需要进行调整。
不要使用right:500px
。如果屏幕宽度小于等于500px
，则div
将超出范围。（有道理，对吧？）如果你想让你的网站有响应性，就不要使用绝对值。相反，你可以这样做：
@media (max-width: 900px) {
    .timer {
       right:0;
    }
}

.timer {
    margin: auto;
}

试试这个，它可以在所有屏幕上正常工作
根据您的要求，代码如下所示：-
<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>


正进行保养
.计时器{
字体大小：60px；
颜色：白色；
位置：固定；
右：500px；
底部：0；
}
.stimer{
字体大小：60px；
颜色：白色；
位置：固定；
右：500px；
底部：60px；
}
.bTimer{
字体大小：60px；
颜色：白色；
位置：固定；
右：500px；
底部：0；
}
身体{
背景重复：无重复；
背景大小：100%100%；
}
.utxt{
位置：固定；
宽度：100%；
}
.圆圈{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.dtxt{
位置：绝对位置；
底部：0；
宽度：30%；
}
@介质（最大宽度：900px）{
.计时器{
显示：无；
}
.刺激器{
右：0；
}
B.时间{
右：0；
}
}
@介质（最小宽度：900px）{
.刺激器{
显示：无；
}
B.时间{
显示：无；
}
}


//确定我们倒计时的日期
var countDownDate=新日期（“2017年5月19日00:00:00”）.getTime（）；
//每1秒更新一次倒计时
var x=setInterval（函数（）{
//获取今天的日期和时间
var now=new Date（）.getTime（）；
//找出现在和倒计时日期之间的距离
var距离=倒计时日期-现在；
//天、小时、分钟和秒的时间计算
变量天数=数学楼层（距离/（1000*60*60*24））；
可变小时数=数学楼层（（距离%（1000*60*60*24））/（1000*60*60））；
var分钟=数学楼层（（距离%（1000*60*60））/（1000*60））；
var秒=数学楼层（（距离%（1000*60））/1000）；
//在id=“demo”的元素中输出结果
document.getElementById（“demo”）.innerHTML=days+d+hours+h
+分钟+米+秒+秒；
//在id=“sdemo”（已添加）的元素中输出结果
document.getElementById（“sdemo”）.innerHTML=days+“d”+hours+“h”；
//将结果输出到id=“bsdemo”的元素中（已添加）
document.getElementById（“bsdemo”）.innerHTML=minutes+“m”+seconds+“s”；
//如果倒计时结束，写一些文字
如果（距离<0）{
净间隔（x）；
document.getElementById（“demo”）.innerHTML=“过期”；
}
}, 1000);

希望我帮了你
 位置固定，右侧500px必须大于您的宽度。你想完成什么？你必须使用@media为不同的屏幕大小重新定义你的风格，或者你可以使用twitter引导来回复为什么媒体查询？在这种情况下，它们没有用处。这只是一个简单的水平居中的问题。@Emonadeo你的答案甚至不能解决问题，所以也许可以先修正你自己的答案……谢谢它在某个地方帮助了我