如何仅在特定屏幕尺寸下使HTML元素可单击

Question

我正在尝试将旧的,定制的网站转换为响应式.我已经完成了大量的CSS工作,并且可以获得我想要的大部分的定位和定位.还有最后一件让我悲伤的作品.

我在页面上显示了一系列新闻文章.当我去手机大小的显示器时,我真的希望这些标题变成"可点击",以便我可以用它们来显示/隐藏文章的细节.但我不希望这些标题在更大的屏幕尺寸下可点击.

每篇文章的基本布局是......

<article id="article-001">
    <div class="newsArticleTitle">Title goes here</div>
    <div class="newsArticleTeaser">
        <p>
            Teaser paragraph</p>
    </div>
    <div class="newsArticleContent">
        <p>
            Paragraph 1</p>
        <p>
            Paragraph 2</p>
    </div>
</article>

随着屏幕尺寸减小,控制这些文章显示的相关CSS是......

@media only screen and (max-width: 479px) {
    .newsArticleTeaser {
        display: none;
    }
}


@media only screen and (max-width: 319px) {
    .newsArticleContent {
        display: none;
    }
}

...因此,在最窄的屏幕尺寸下,只有文章标题可见.然后我需要/希望该文章标题(div with class="newsArticleTitle")然后成为可点击的项目,以便切换预告片和内容的可见性.

是否有理智的方式来实现这一目标？我的回退方法可能是复制标题元素 - 一次用<a>标记包装它,一次没有 - 并用CSS切换这两者的可见性.但这感觉不对.

有没有人更优雅地解决这个问题,或者有更好的方法来设计这个？

Answer 1

您可以将css属性pointer-events: none与媒体查询结合使用:

.elementToClickInMobile {
    pointer-events: none;
    @media all and (max-width: 460px) {
        pointer-events: all
    }
}

这样可以防止大屏幕中的任何点击事件 460px

编辑// 正确建议这可行> IE10

您可以使用的旧版(过时版)浏览器的后备版

$("elementToClick").click(function(e){
    var outerWidth = window.outerWidth
    if (outerWidth > 480) {
        e.preventDefault(); //for browsers
        e.returnValue = false; //for IE
        return false
    }
});

JS未经测试,请随时评论进一步的建议!

EDIT2 //找到了IE7 +指针事件的简洁回退,包括一个preventClick()方法!https://github.com/vistaprint/PointyJS