Как изменить переменную в функции в зависимости от ширины экрана

201

09 июля 2019, 17:00

Прошу помощи у того кто может разбираться в этом:
Есть в моем таймере разная ширина экрана:
1200 и больше --- fontSize 30, captionSize 10
от 992 до 1200 --- fontSize 25, captionSize 8
от 768 до 992 - fontSize 17, captionSize 5
Как это присвоить переменной fontSize и captionSize?

<script>
        $('#countdown-11').timeTo({
            seconds: 100000,
            displayHours: true,
            displayDays: 2,
            displayCaptions: true,
            fontSize: 20,
            captionSize: 10
        });
</script>

Answer 1

const MEDIA_VARIABLE = { 
  '992' : { 
    fontSize: 17, 
    captionSize: 5, 
  }, 
  '1200' : { 
    fontSize: 25, 
    captionSize: 8, 
  }, 
  '9999' : { 
    fontSize: 30, 
    captionSize: 10, 
  } 
}; 
let $width = +$(window).width(), 
    currentVariables = {}; 
     
for ( let breakpoint in MEDIA_VARIABLE) { 
  if ( +$width > +breakpoint) continue; 
    currentVariables = MEDIA_VARIABLE[breakpoint]; 
    break; 
} 
 
$('#countdown-11').timeTo({ 
            seconds: 100000, 
            displayHours: true, 
            displayDays: 2, 
            displayCaptions: true, 
            fontSize: currentVariables.fontSize || 20, 
            captionSize: currentVariables.captionSize || 10 
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<pre> 
Прошу помощи у того кто может разбираться в этом: 
Есть в моем таймере разная ширина экрана: 
1200 и больше --- fontSize 30, captionSize 10 
от 992 до 1200 --- fontSize 25, captionSize 8 
от 768 до 992 - fontSize 17, captionSize 5 
Как это присвоить переменной fontSize и captionSize? 
</pre>

Но лучше на CSS решать такие вопросы, через @media

Answer 2

Вот пример решения.

$(document).ready(function(){ 
  var $window_width = $(window).width(); 
  var $fontSize = 20,$captionSize = 10; // default sizes 
  if($window_width >= 1200){ 
    $fontSize = 30; 
    $captionSize = 10; 
  } 
  else if($window_width >= 992 && $window_width < 1200){ 
    $fontSize = 25; 
    $captionSize = 8; 
  } 
  else if($window_width >= 768 && $window_width < 992){ 
    $fontSize = 17; 
    $captionSize = 5; 
  } 
  $('#countdown-11').timeTo({ 
    seconds: 100000, 
    displayHours: true, 
    displayDays: 2, 
    displayCaptions: true, 
    fontSize: $fontSize, 
    captionSize: $captionSize 
  }); 
});