Question

下面的代码使地图在点击时展开为更大的尺寸，然后在第二次点击时返回到之前的尺寸。它工作得很好，但我想在较小的浏览器上使用不同大小的地图。我的断点是1020px和767px。我如何将其集成到代码中，以便为较小的浏览器指定大小？

<script>
  $( function() {
    var state = true;
    $( ".map a" ).on( "click", function() {
      if ( state ) {
        $( ".map" ).animate({
          height: 500,
		  width: "100%"
        }, 500 );
      } else {
        $( ".map" ).animate({
          height: 349,
		  width: "50%"
        }, 1000 );
      }
      state = !state;
    });
  } );
</script>

Answer 1

css过渡与媒体查询结合将使其更容易：在css中创建默认类和扩展类，然后你只需要在元素上添加或删除扩展类（toggleClass();为你处理它）然后，您可以根据分辨率在媒体查询中定义您想要的宽度和高度

＆＃13;

$( function() {
    $( ".map a" ).on( "click", function() {
      $( ".map" ).toggleClass("extended");
     });
  } );

＆＃13;

.map{
  height:349px;
  width:50%;
  border:solid 1px red;
  transition : height 1s, width 1s;
}

.map.extended{
  height:500px;
  width:100%;
  transition-duration: .5s;
}
 
@media screen and (max-width: 1280px)  {
.map.extended{
  height:20px;
  width:80%;
}
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="map"><a>click me</a></div>

＆＃13;

在这里查看前缀和兼容性： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

这里有分辨率的媒体查询示例 https://gist.github.com/Mikodes/be9b9ce42e46c3d4ccb6

在javascript中定位特定的分辨率

1 个答案: