Question

我正在尝试在my website上实现自适应设计，而我在功能内容滑块上有点卡住了。

我正在使用Coda Slider作为我的精选内容幻灯片，我希望小屏幕宽度的内容是中止滑块的jQuery功能并删除幻灯片功能的内联样式，所以它只是显示块。

我很确定我以前见过这样的例子，但是当我刚刚通过我的书签挖掘这里发布的例子时，我真的找不到任何实际看起来像这样的方式。也许是因为JS的限制会使这不可行？

这是我用来实现滑块的jQuery。有什么我可以简单地添加它会告诉它中止并恢复到一定大小的屏幕宽度正常吗？

   // Coda slider via http://www.ndoherty.biz/demos/coda-slider/2.0/

   $('#coda-slider-1').codaSlider({
        dynamicArrows: false,
        dynamicTabs: false,
        autoSlide: true,
        autoSlideInterval: 4000,
        slideEaseDuration: 500,
        autoSlideStopWhenClicked: true,
   });

现在，我只是使用两个使用媒体查询实现的样式表，如下所示：

<link rel="stylesheet" href="/css/2011/fullwidth-responsive.css" media="only screen and (min-width : 480px)" />
<link rel="stylesheet" href="/css/2011/mobile.css" media="only screen and (min-width : 320px) and (max-width : 480px)" />

所以我希望JS中止与移动样式表相对应，基本上我将仅使用CSS呈现内容，而不是使用任何JS表现动画等，例如滑块为完整的网站。

Answer 1

有几种方法可以做到这一点，但总会有一些区别（除非你实现了一个非常先进的检测设置来响应实时窗口的变化）。媒体查询将响应任何大小的变化（在任何时候），我们的代码只运行一次（在我们初始化Coda滑块之前）：

1。通过检查屏幕可用宽度来检测宽度：

if ( screen.availWidth > 480 ) {
  // .. initialize Coda here ..
}

2。检测您使用移动样式表应用的特定样式：

例如，假设#header的{{1}}高度为50px。您可以通过检查该高度来检测该工作表是否处于活动状态：

mobile.css

还有其他方法（比如创建虚拟媒体查询等），但其中任何一种都可以做你想要的。

注意：您可能还需要一个“else”语句来删除/添加移动布局可能需要的类。

如何禁用我的Coda Slider以获得移动屏幕分辨率？

1 个答案: