Question

我正在整理一个我想要响应浏览器重新调整大小的网站。该网站为768px以下的页面提取一组CSS样式，为另一个大于768px的窗口提取另一组CSS样式。

我的功能视频下面有一个javascript滑块（jcarousel）。如果我打开一个大于768px的窗口（使用Chrome），那么javascript滑块可以正常工作。如果我减小窗口大小，则隐藏滑块（显示：无样式），并显示其他内容。如果我将窗口调整得更大，滑块会出现并正常工作。

然而，这就是我的问题...如果我打开一个小于768px的浏览器，CSS会在开始时隐藏我的javascript滑块，并显示我的其他内容。但是当我调整窗口大小并使其变大（超过768px）时，滑块无法正常工作。我假设javascript及其相关的样式需要被激活＆＃34;原来。当首先打开一个较小的窗口时，有没有办法让它工作？

Answer 1

一种选择是简化操作，让CSS控制滑块的显示。

在HTML中添加一个新的slider_wrap类，它包围滑块

<div class="slider_wrap">
    <div class="vidprev">back arrow</div>
    <div id="vidz" class="slider">thunbnails</div>
    <div class="vidnext">next arrow</div>
</div>

然后在CSS中添加一个新的媒体查询，隐藏或显示这些新类

@media (max-width: 768px) {
    .slider_wrap{   
        display:none;
    }
}

希望这有帮助！

Answer 2

搞定了。而不是尝试并隐藏滑块的div标签（显示：无），我使用绝对定位（带有包装div标签）将其移出屏幕。这似乎保持了javascript的活跃性，同时没有向用户显示任何内容......

.sliderwrap {width：100％;位置：绝对的;顶部：0;左：9999; }

我认为这是一个＆＃34;马虎＆＃34;修复，但它的工作原理......

增加页面大小，隐藏的javascript滑块出现，然后不起作用

2 个答案: