添加媒体查询答案

【问题标题】：Adding Media Query添加媒体查询
【发布时间】：2017-06-30 11:21:36
【问题描述】：

我想让我的countdown timer responsive in mobile view 我想让它在移动设备中响应，它应该像一个列表days ,hours,min,seconds该怎么做？

  <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div id="main">
            <div class="content">
                <div class="text">
                </div>
                <!-- /.Text Div -->
                <div class="counter">
                    <h3>Registration Closes In :</h3>

                    <div id="countdown"><span class="days">10 <b>Days</b></span> <span class="hours">7 <b>Hours</b></span> <span class="minutes">26 <b>Minutes</b></span> <span class="seconds">58 <b>Seconds</b></span></div>
                    <!-- /#Countdown Div -->
                </div>
                <!-- /.Counter Div -->
            </div>
            <!-- /.Content Div -->
        </div>
        <!-- /#Main Div -->
    </div>
    <!-- /.Columns Div -->
</div>
<!-- /.Row Div -->

【问题讨论】：

阅读并理解w3schools.com/css/css_rwd_mediaqueries.asp，然后你就知道如何使用媒体查询了。
我知道媒体查询，但我不知道如何使用它来解决这个问题
对不起，我不明白你的问题 - 你能附上时间应该如何显示的图片吗？
请检查 js fiddle 并调整到移动视图我希望时间安排好
aah 你想避免 span 元素中的换行符。查看stackoverflow.com/questions/7300760/…或stackoverflow.com/questions/15749279/…的解决方案

标签： javascript jquery html media-queries

【解决方案1】：

根据我的理解，你问的是，如何计算今天和FinalDay之间的时间差？

var today = new Date();
var FinalDay = new Date("7-01-2017 18:00");
var milliSecondsRemaining = (FinalDay - today); // milliseconds between now & FinalDay
var daysRemaining = Math.floor(milliSecondsRemaining / 86400000); // days
var hoursRemaining = Math.floor((milliSecondsRemaining % 86400000) / 3600000); // hours
var minutesRemaining = Math.round(((milliSecondsRemaining % 86400000) % 3600000) / 60000); // minutes
alert("Registration Closes In" + daysRemaining + " Days, " + hoursRemaining + " Hours, " + minutesRemaining + " Minutes");

希望这能解决您的问题。

【讨论】：