小编Mik*_*keZ的帖子

如何从iOS上的移动Safari中删除点击/点击延迟？

我已经在事件监听器上摆弄了很多东西,并且使用了许多不同的脚本(例如Lightning Touch)而没有任何乐趣.有一些解决方案可行,但是这些类型的脚本会强制您将目标元素编码到DOM上的每个链接.不幸的是,这可能导致一些快速和一些缓慢的过渡,这对我不起作用.

我最近开始使用LessCSS,并且我在CSS的清晰度和可读性方面取得了相当大的成功.但是,我认为我并没有充分利用Less.

我现在正在使用Less编写我的第一个完全响应的站点,我关注性能和速度. 有一点需要注意的是,我不坚持使用"断点"方法 - 我会一直上下缩放直到它们中断,然后我编写CSS来修复它们; 这通常导致20到100个媒体查询.

我想开始使用Less来将媒体查询嵌套在我的元素中,例如下面的示例:

.class-one {
    //styles here

    @media (max-width: 768px) {
        //styles for this width
    }
}
.class-two {
    //styles here

    @media (max-width: 768px) {
        //styles for this width
    }
}

通过我的初步测试,我发现在查看编译的CSS输出时 - 这种方法导致多个(很多!)实例@media (max-width: ___px).我已经浏览了互联网,并没有找到任何明确解释嵌套/冒泡媒体查询的性能影响的内容.

更新1:我意识到更多的CSS信息导致更大的CSS文件下载 - 但我并不担心网站加载时间作为唯一的指标.在DOM准备好之后,我对浏览器对内存和性能的处理更感兴趣.

更新2和半解决方案:我发现这篇文章讨论了CSS选择器的四个主​​要类别及其效率.我强烈推荐阅读,这有助于我理解如何最好地解决我的过度媒体查询CSS.

所以我的问题是: 在DOM准备好之后,在我编译的样式表中有这么多媒体查询会影响加载时间和性能吗？