Javascript @媒体查询-如何断开水平滚动？

我有一个水平滚动，我想变成一个垂直滚动时，查看设备是480px或更少

目前我对应的HTML是：

<!-- section that contains all pics -->
<section id="wrapper" class="wrapper">
    <article class="post">
    <p><img src="img/scroll/01_scroll.jpg" alt="test image 1" title="test image" width="994" height="620" class="alignnone size-full wp-image-240" /></p>
    </article>
</section>
<!-- close section -->

我的媒体查询是：

@media all and (max-width: 480px) {
   {

我希望在这种情况下（480px或更低），脚本停止水平滚动，开始垂直滚动，并调整大小以获得最大宽度和适当高度

---

任何帮助都将不胜感激。提前感谢。

我觉得使用jquery将这些元素包装在表单元格中太过分了。我倾向于摆脱这种情况，只在文章元素上使用响应浮动。 所以新的js：

<script>

    $(function() {
        $("body").mousewheel(function(event, delta) {
            this.scrollLeft -= (delta * 50);
            event.preventDefault();
        });
    });

    </script>

在你的文章之后的某个地方，你需要加一个明确的词：两者都有；规则…

我明白了

答案，一如既往，就在我面前。问题是，当脚本创建表时，我正在为.post和#wrapper而斗争！考虑到这一点，我操纵了桌子和中提琴！仅在手机上垂直滚动！见下文：

@media all and (max-width: 480px) {
#wrapper {
   top:155px;
   width:auto;
   margin:0 0 0 10px;
   padding:0 0 0 0;
   background:#fff;
   position:absolute;
   z-index:2;
}

table {
   margin: 0 0 0 0;
}

td {
   display:block;
   padding: 0 0 10px 0;
}

tr {
   max-width:100%;
   height:auto;
}

table img {
   max-width:100%;
   height:auto;
}

---

真是松了一口气。。。现在，为了找出我的页脚出了什么问题……

我现在要试试这个，我不明白“clear:tweet”规则是什么，也不明白它的作用。不起作用。当我删除表格包装脚本时，它坏了。它确实是垂直滚动的。。。但所有其他方面都没有。这引出了第二个问题，是否可以通过@media query删除ID和类？

<script>

    $(function() {
        $("body").mousewheel(function(event, delta) {
            this.scrollLeft -= (delta * 50);
            event.preventDefault();
        });
    });

    </script>

.post {
   padding:0 10px 0 0;
   background:#fff;
   height:100%;
   display:block;
   float:left;
}
@media all and (max-width: 480px) {
   .post {
       float:none;
     }
   }

@media all and (max-width: 480px) {
#wrapper {
   top:155px;
   width:auto;
   margin:0 0 0 10px;
   padding:0 0 0 0;
   background:#fff;
   position:absolute;
   z-index:2;
}

table {
   margin: 0 0 0 0;
}

td {
   display:block;
   padding: 0 0 10px 0;
}

tr {
   max-width:100%;
   height:auto;
}

table img {
   max-width:100%;
   height:auto;
}