使用手机时html、css、javascript没有响应答案

【问题标题】：The html, css, javascript are not responsive when using mobile phone使用手机时html、css、javascript没有响应
【发布时间】：2020-10-15 03:24:46
【问题描述】：

谁能帮我让这段代码响应？我在 w3school (https://www.w3schools.com/html/html_responsive.asp) 上添加了<meta name="viewport" content="width=device-width, initial-scale=1.0"> 的代码行，但我使用手机时无法检测到倒计时。

// Set the date we're counting down to
var countDownDate = new Date("Nov 27, 2020 00:00:00").getTime();

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

  // Get today's date and time
  var now = new Date().getTime();
    
  // Find the distance between now and 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);
    
    document.getElementById("day").innerHTML = "<br />" + days + "<br />"+ "Ngày";
    document.getElementById("hour").innerHTML = "<br />" + hours + "<br />" + "Giờ";
    document.getElementById("minute").innerHTML = "<br />" + minutes + "<br />" + "Phút";
    document.getElementById("second").innerHTML = "<br />" + seconds + "<br />" + "Giây";
}, 1000);

body, html {
  height: 100%;
  margin: 0;
}
.bgimg {
  background-image: url('https://training.leadthechange.asia/wp-content/uploads/2020/10/MINDFUL-1536x864.png');
  height: 100%;
  background-position: center;
  background-size: cover;
  position: relative;
  color: black;
  font-family: "Courier New", Courier, monospace;
  font-size: 25px;
}

.middle {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 .circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    font-size: 30px;
    background: #333333;
    display: inline-block;
    text-align: center;
    color: white;
    font-weight: bold;
  }

<div class="bgimg">
  <div class="middle">
  <div class="circle"><span id="day"></span></div>
  <div class="circle"><span id="hour"></span></div>
  <div class="circle"><span id="minute"></span></div>
  <div class="circle"><span id="second"></span></div>
  </div>
</div>

图片还可以，但是天、时、分、秒倒计时没有反应

【问题讨论】：

你是指倒计时的宽度和高度吗？
你说得对，在手机上使用不响应
通过使用媒体查询，我们可以使倒计时响应。试试这个： /* 这里 767px 表示视口宽度 / @media only screen and (max-width: 767px) { .circle { width: 80px;高度：80px；字体大小：18px； } / 下面的css只是为了美化 */ .middle { width: 100%;文本对齐：居中； } }

标签： javascript html css responsive

【解决方案1】：

通过使用媒体查询，我们可以使倒计时响应。

试试这个：

/* Here 767px means viewport width */
@media only screen and (max-width: 767px) {
.circle { 
width: 80px; 
height: 80px; 
font-size: 18px; 
}

/* Below css is to beautify only */ 
.middle { 
width: 100%;
text-align: center;
}
}

【讨论】：

【解决方案2】：

可以通过调整父 div 使其具有响应性。我试图解决你的问题here。要查看完整页面，请单击here。代码-

// Set the date we're counting down to
var countDownDate = new Date("Nov 27, 2020 00:00:00").getTime();

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

  // Get today's date and time
  var now = new Date().getTime();
    
  // Find the distance between now and 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);
    
    document.getElementById("day").innerHTML = "<br />" + days + "<br />"+ "Ngày";
    document.getElementById("hour").innerHTML = "<br />" + hours + "<br />" + "Giờ";
    document.getElementById("minute").innerHTML = "<br />" + minutes + "<br />" + "Phút";
    document.getElementById("second").innerHTML = "<br />" + seconds + "<br />" + "Giây";
}, 1000);

html { 
  background: url(https://training.leadthechange.asia/wp-content/uploads/2020/10/MINDFUL-1536x864.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color: black;
  font-family: "Courier New", Courier, monospace;
  font-size: 25px;
}

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 .circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    font-size: 30px;
    background: #333333;
    display: inline-block;
    text-align: center;
    color: white;
    font-weight: bold;
  }

<div class = "parent">
  <div class="middle">
  <div class="circle"><span id="day"></span></div>
  <div class="circle"><span id="hour"></span></div>
  <div class="circle"><span id="minute"></span></div>
  <div class="circle"><span id="second"></span></div>
  </div>
</div>

（如果您想减小圆圈及其文本的大小，可以使用其他人指出的媒体查询！但通常减少移动设备元素的整体大小是一个坏主意，因为会有可见性问题。）

【讨论】：