jQuery Изменение размера менее, чем ширина

Question

Итак, я пытаюсь сделать функцию jQuery для изменения div в основном поплавком слева, когда мой сайт с базой Bootstrap 3 переходит в мобильный вид (< 750px on .container).

$(function() { 

    var container_width_checker = $('.container').css(width); 

    var container_width = function(){ 

     if (container_width_checker < 750px) { 
      $('.accountcustom').css({ 'float': 'none', 'padding-left': '10px', }); 
      $('#shopping_cart a').css({ 'float': 'none', 'padding-left': '10px', }); 
     } else { 
      $('.accountcustom').css({ 'float': 'right', }); 
      $('#shopping_cart a').css({ 'float': 'right', }); 
     } 
    }; 

    container_width(); 

    $(window).resize(function() { 
     container_width(); 
    }); 

}); 

Я правильно подошел с функцией jQuery для изменения размера?

Answer 1

Вы находитесь на правильном пути, но container_width_checker должна быть рассчитана на каждом изменении размера. Как есть, он вычисляется только один раз.

if ($('.container').width() < 750) { 

Лучше, однако, вместо этого взглянуть на медиа-запросы.

Answer 2

Я предлагаю вам просмотреть запросы на мультимедиа CSS и оставить jQuery.

Здесь есть некоторая дополнительная информация: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Answer 3

Использование .width() позволит вам работать с чисто численным значением, а не с единицей измерения.

$(function() { 
    var container_width = function(){ 
     var container_width_checker = $('.container').width(); 
     if (container_width_checker < 750) { 
      $('.accountcustom').css({ 'float': 'none', 'padding-left': '10px', }); 
      $('#shopping_cart a').css({ 'float': 'none', 'padding-left': '10px', }); 
     } else { 
      $('.accountcustom').css({ 'float': 'right', }); 
      $('#shopping_cart a').css({ 'float': 'right', }); 
     } 
    }; 
    container_width(); 
    $(window).resize(function() { 
     container_width(); 
    }); 
});