Дивы не знают об изменении размера экрана

Question

Первый div - это категория, а второй div содержит несколько фотографий.

Я хотел сделать что-то, что, когда пользователь нажимает на изображение первый ДИВ шаг 0,7 ширины экрана вправо и все изображения во второй DIV исчезают, так что я написал:

$(document).ready(function() { 
 
    $("img").click(function() { 
 
    var my_width = screen.width * 0.7; 
 
    $(".second_div").find("img").hide(); 
 
    $(".first_div").css({ 
 
     "transform": "translate(" + my_width + "px,0px)", 
 
     "-webkit-transform": "translate(" + my_width + "px,0px)", 
 
     "-ms-transform": "translate(" + my_width + ",0px)" 
 
    }); 
 
    }); 
 
});

.first_div { 
 
    transition-duration: 2s; 
 
}

<div class="first_div col-md-1"> 
 
    //some code 
 
</div> 
 
<div class="second_div col-md-11> 
 
      //some codes 
 
</div>

когда его полный экран работает правильно, но при изменении размера окна и попробуйте снова первый DIV не будет располагаться в том, где он должен (0.7 ширины экрана) что» S не так?

Answer 1

для ширины окна Я хотел бы использовать следующее:

var my_width = document.documentElement.clientWidth * 0.7; 

это то же самое (совместимый кросс-браузер) решение используется JQuery-х $.width()

Для получения дополнительной информации о различных способах получения ширины, см это link.

Answer 2

Попробуйте использовать внутреннюю ширину окна вместо ширины экрана, чтобы он был относительно размера окна просмотра. заменить

var my_width = screen.width * 0.7 ;

с:

var my_width = window.innerWidth * 0.7 ;

Смотрите пример здесь:

http://codepen.io/anon/pen/jWWEKO