在分辨率更改时动态自动调整DIV

Question

我有div。在这个div里面，我放了倒数计时器。我需要让它响应。如果我在更改分辨率后刷新页面（如果更改浏览器大小并设置精确分辨率），则会响应，但是当您缩放页面或更改浏览器大小时，它会保持相同的大小。这是图片： picture of countdown while i am zooming

{
"name": "symfony/framework-standard-edition",
"license": "MIT",
"type": "project",
"description": "The \"Symfony Standard Edition\" distribution",
"autoload": {
    "psr-0": {
        "": "src/"
    }
},
"require": {
    "php": ">=5.3.3",
    "symfony/symfony": "2.7.*",
    "doctrine/orm": "~2.4,>=2.4.5",
    "doctrine/doctrine-bundle": "1.5.*",
     "twig/extensions": "1.2.*",
    "symfony/assetic-bundle": "2.3.*",
    "symfony/swiftmailer-bundle": "2.3.*",
    "symfony/security":  "@stable",
    "symfony/monolog-bundle": "@stable",
   "sensio/distribution-bundle": "4.0.*",
    "sensio/framework-extra-bundle": "3.0.*",
    "sensio/generator-bundle": "2.3.*",
    "leafo/lessphp": "*",
    "twitter/bootstrap": "*",
    "friendsofsymfony/jsrouting-bundle": "@stable",
    "friendsofsymfony/user-bundle": "@stable",
    "incenteev/composer-parameter-handler": "~2.0",
    "friendsofsymfony/comment-bundle":"@stable",
    "sonata-project/core-bundle": "@stable",
    "sonata-project/media-bundle": "2.3.3",
    "sonata-project/admin-bundle": "@stable",
    "sonata-project/doctrine-orm-admin-bundle": "@stable",
    "knplabs/knp-paginator-bundle": "@stable",        
    "sonata-project/translation-bundle": "~1",
    "a2lix/translation-form-bundle": "1.*@dev",
    "a2lix/i18n-doctrine-bundle": "^0.1.0",
    "jordillonch/crud-generator": "dev-master",
    "knplabs/doctrine-behaviors": "@stable",
    "doctrine/doctrine-fixtures-bundle": "@stable",
    "sonata-project/user-bundle": "@stable",
    "fp/jsformvalidator-bundle":"@stable",
    "ensepar/html2pdf-bundle" : "@stable",
    "sonata-project/ecommerce": "@stable",
    "ibrows/newsletter-bundle": "*"

},
"scripts": {
    "post-install-cmd": [
        "Incenteev\\ParameterHandler\\ScriptHandler::buildParameters",
        "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::buildBootstrap",
        "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::clearCache",
        "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::installAssets",
        "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::installRequirementsFile"
    ],
    "post-update-cmd": [
        "Incenteev\\ParameterHandler\\ScriptHandler::buildParameters",
        "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::buildBootstrap",
        "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::clearCache",
        "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::installAssets",
        "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::installRequirementsFile"
    ]
},
"config": {
    "bin-dir": "bin"
},
"minimum-stability": "stable",
"extra": {
    "symfony-app-dir": "app",
    "symfony-web-dir": "web",
    "incenteev-parameters": {
        "file": "app/config/parameters.yml"
    },
    "branch-alias": {
        "dev-master": "2.3-dev"
    }
}

var timer,
  $win = $(window);

$win.on('resize', function() {
  clearTimeout(timer);
  timer = setTimeout(function() {
    $("#DateCountdown").height($win.height());
  }, 500);

});
$("#DateCountdown").TimeCircles({
  "animation": "smooth",
  "bg_width": 0.5,
  "fg_width": 0.03,
  "circle_bg_color": "#111111111",
  "time": {
    "Days": {
      "text": "Дней",
      "color": "#FFCC66",
      "show": true
    },
    "Hours": {
      "text": "Часов",
      "color": "#99CCFF",
      "show": true
    },
    "Minutes": {
      "text": "Минут",
      "color": "#BBFFBB",
      "show": true
    },
    "Seconds": {
      "text": "Секунд",
      "color": "#ff8080",
      "show": true
    }
  }
});

(function($) {

/**
 *	This element is created inside your target element
 *	It is used so that your own element will not need to be altered
 **/

.time_circles {
  position: relative;
  width: 100%;
  height: 100%;
}


/**
 *	This is all the elements used to house all text used
 * in time circles
 **/

.time_circles>div {
  position: absolute;
  text-align: center;
}


/**
 *	Titles (Days, Hours, etc)
 **/

.time_circles>div>h4 {
  color: #ffffff;
  font-size: 11pt;
  margin: 0;
  padding: 0;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Century Gothic', Arial;
  line-height: 1;
}


/**
 *	Time numbers, ie: 12
 **/

.time_circles>div>span {
  color: #ffffff;
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
  text-align: center;
  font-family: 'Century Gothic', Arial;
  line-height: 1;
  font-weight: bold;
}

这是工作onload的宽度和高度的脚本。如何在不刷新的情况下动态完成

<div class="container" style="background-color: rgba(69,63,38,.4);backdrop-filter: blur(10px);width: 80%;margin: 3em auto 0;">
  <div style="text-align:center;font-size:3vw;color:white">До следующего урожая осталось</div>
  <div id="DateCountdown" data-date="2017-07-06 00:00:00" style="width: 100%"></div>
</div>

Answer 1

您可以使用窗口onresize事件。

点击此处查看：https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onresize

简单的代码示例：

var onResizeHandler = function() {
    // add your resize handling here
}

window.onresize = onResizeHandler;

点击 here ，查看此示例的实际效果。