jQuery更改媒体查询宽度值

Posted 2023-03-06

【中文标题】jQuery更改媒体查询宽度值

【英文标题】：jQuery change media query width value

【发布时间】：2013-06-13 09:47:01

【问题描述】：

是否可以在页面运行时使用 jQuery 或其他任何东西来更改 @media query css 的宽度值？

例如，如果在 style.css 中我有

@media screen and (min-width: 400px) 
   /*whatever*/

加载网站后将其更改为500px

【问题讨论】：

抱歉跑题了，为什么？

我也有同样的要求。

我知道这是一个旧线程，但为了回复@jQuery00，如果添加或删除了更多内容，我需要能够在不同设备上调整最小宽度。

这对我也有帮助。如果有调整大小或旋转事件，我需要扩展 iframe。我可以全部用 javascript 编写，但在我的 @media 查询中更改一个参数会更简单、更干净、更优雅。

加上@TonyBrasunas 的观点，图形密集型 CSS 在 GPU 上呈现，因此性能比 JS 好得多。

【参考方案1】：

这是传统方法无法做到的。您必须通过 jQuery 插入完整的 css。例如：

 $('body').append("<style type='text/css'>@media screen and (min-width: 500px)  /*whatever*/ </style>");