Divs不知道屏幕大小调整

Question

第一个div是一个类别，第二个div包含一些照片。

我想做一些事情，当用户点击图像时，第一个div将屏幕宽度的0.7移动到右边，第二个div中的所有图像都消失了，所以我写道：

＆＃13;

＆＃13;

$(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)"
    });
  });
});

＆＃13;

.first_div {
  transition-duration: 2s;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

当它的全屏工作正常时，但是当我调整窗口大小并再次尝试时，第一个div不会位于它应该的位置（屏幕宽度为0.7）错误的是什么？

Answer 1

窗口宽度

我将使用以下内容：

var my_width = document.documentElement.clientWidth * 0.7;

这是jQuery的$.width()

使用的相同（跨浏览器兼容）解决方案

有关获取宽度的不同方法的详细信息，请参阅此link。

Answer 2

尝试使用窗口的内部宽度而不是屏幕宽度，以便它相对于视口的大小。替换

＆＃13;

＆＃13;

var my_width = screen.width * 0.7 ;

＆＃13;

＆＃13;

＆＃13;

使用：

＆＃13;

＆＃13;

var my_width = window.innerWidth * 0.7 ;

＆＃13;

＆＃13;

＆＃13;

请参阅此处的示例：

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