很明显，使用CSS3阴影，透明度，效果和其他功能可以大大降低某些手机/平板电脑的整体页面性能，但我无法找到一种方法来确定设备性能是否正常不足以处理＆＃34;沉重的＆＃34; CSS3功能。我创建了两个版本的CSS：针对预算手机/平板电脑的精简版和适用于个人电脑的完整版等等;但我该如何选择？使用媒体查询看起来不是一个温和的选择。
答案 0 :(得分：4)
这是一个非常复杂的主题，没有史诗很难正确回答。我尽量保持简短：
Chrome Dev Tools提供了许多方便的功能来分析JS和CSS功能。作为第一步，我推荐时间轴，激活'JS Profile'的捕获，Memory和Paint，然后分析最大的彩色块（需要进行大量的计算/布局/绘画）更多详细信息：https://developer.chrome.com/devtools/docs/timeline
一个非常流行的误解是“长期和大量选择者”的谣言导致Perf。问题。从我所看到的，通过像Paul Lewis这样出色的性能优点调试和阅读，这通常不是瓶颈。计算和应用CSS值非常快。相反，绘画和布局，尤其是使用动画时，成本很高。有一些技巧，例如使用translate而不是左/顶部定位，使用will-change属性等等。您可以在此处找到有关原因的概述：https://csstriggers.com/
结论：媒体查询可能不是一个完美的解决方案，但也不错，因为大量的选择器可能无关紧要。
答案 1 :(得分：1)
也许尝试通过屏幕分辨率进行选择？预算设备几乎总是屏幕不好：）