Question

简单问题 - 是否可以将jquery与媒体查询一起使用，以便jquery仅在特定屏幕尺寸以下发生。

我有一个使用悬停在桌面上的导航，但我需要点击移动设备。

我想在移动设备上控制其他一些操作，例如按钮上的preventDefault（）操作

Answer 1

你可以在windows的resize功能中做到这一点：

$(window).on('resize', function (e) {
    var width = $(window).width();

    if (width > 1024)
        // Codes
});

Answer 2

调整窗口大小不是很好。

最好的方法是使用matchmedia

var mql = window.matchMedia("screen and (min-width: 800px)")
if (mql.matches){ // if media query matches
 alert("Window is 800px or wider")
}
else{
 // do something else
}

P.S。确保你下载了Typescript

Answer 3

@Mohamad Shiralizadeh

这看起来不错。但是，它仅在调整窗口大小时触发。首次加载页面时不会触发。因此，根据您的示例：

BottomNavigationBarItem(
  title: Text('Icon'),
  icon: Container(
    padding: EdgeInsets.fromLTRB(4,8,8,8),
    decoration: BoxDecoration(
      shape: BoxShape.circle,
      color: Colors.orange,
    ),
    child: FlutterLogo(
      size: 38.0,
    ),
  ),
),

}）;

Jquery和媒体查询

3 个答案: