如何使jquery适应“@媒体（最大宽度）`

感谢下面我的jquery脚本，我的2

div

animate。当屏幕小于

700px

时，

div

变成更小的正方形（

35px

而不是

50px

）。我想要

.animate（{width:100px}）

仅当屏幕小于

700px

时才将动画设置为

70px

。为此，我需要在jquery脚本中加入一个新变量，它考虑

@media（max width:700px）

是否到位。但我还没找到办法。救命！：）

$（文档）.ready（函数（）{
$（“.rightSocial a”）.hover（函数（）{
$（this.stop（）.animate（{width:“100px”}）；
$（this.find（'span'）.stop（）.animate（{“左边距”：“50px”}）；
},
函数（）{
$（this.stop（）.animate（{width:“50px”}）；
$（this.find（'span'）.stop（）.animate（{“左边距”：“0”}）；
});
});
.rightSocial{
高度：300px；
位置：固定；
左：0；
顶部：100px；
}
a.社会权利{
显示：块；
宽度：50px；
高度：50px；
页边顶部：1px；
}
.twitterCont{
背景：红色；
位置：相对位置；
}
.FBCont{
背景：蓝色；
位置：相对位置；
}
.右推特{
高度：40px；
宽度：50px；
背景：黄色；
背景尺寸：包含；
背景重复：无重复；
位置：绝对位置；
左边距：0；
}
.rightFB{
高度：40px；
宽度：50px；
背景：红色；
背景尺寸：包含；
背景重复：无重复；
位置：绝对位置；
左边距：0；
}
@介质（最大宽度：700px）{
.rightSocial{
宽度：35px；
}
a.社会权利{
宽度：30px；
高度：30px；
}
.rightTwitter、.rightFB{
高度：30px；
宽度：30px；
}
}

分享
如果您正在使用jQuery，您可能需要检查与
width（）
函数耦合的
resize（）
事件

类似于

$(window).resize(function() {
    if( $(window).width() < 700 ) {
        // magic
    }
}

$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）<700）{
//魔力
}
}
是它的一个现场演示。我使用
$（window）.width（）
来获得窗口的宽度，然后只要有简单的
if
语句。我还为
10px
小于
左边距的
设置
700px
的


$（文档）.ready（函数（）{
$（“.rightSocial a”）.hover（函数（）{
if（$（窗口）.width（）