使用 Javascript 或 JQuery 插入响应式 CSS 规则答案

【问题标题】：Use Javascript or JQuery to insert a responsive CSS rule使用 Javascript 或 JQuery 插入响应式 CSS 规则
【发布时间】：2013-01-24 02:50:40
【问题描述】：

假设我想动态添加与媒体条件相关的 CSS 规则。例如，如下所示：

@media only screen and (min-device-width : 500px){
    .someClass: {
        color: blue;
    }
}

一个合乎逻辑的步骤是使用 JavaScript 检查媒体查询的有效性并在测试通过时插入规则。类似于以下内容：

if(matchMedia(only screen and (min-device-width : 500px))){
    $('.someClass').css('color', 'blue');
}

缺点是规则不会响应。如果我改变屏幕尺寸，蓝色不会相应改变。我可以为屏幕尺寸变化添加一个监听器，但我认为这有点矫枉过正。

我的问题是：有没有办法通过 Javascript 或 JQuery 添加 responsive 规则？

【问题讨论】：

看看对你有没有帮助stackoverflow.com/questions/14068024/…

标签： javascript jquery css responsive-design media-queries

【解决方案1】：

您想了解enquire.js：

enquire.register("screen and (max-width:1000px)", {

    match : function() {},      // REQUIRED
                                // Triggered when the media query transitions 
                                // *from an unmatched state to a matched state*

    unmatch : function() {},    // OPTIONAL
                                // If supplied, triggered when the media query transitions 
                                // *from a matched state to an unmatched state*.

    setup : function() {},      // OPTIONAL
                                // If supplied, a one-time setup function 
                                // triggered when the handler is first registered.                           

    deferSetup : true,          // OPTIONAL, defaults to false
                                // If set to true, defers execution the setup function until
                                // the media query is first matched. Setup is still triggered just once.

    destroy : function() {}     //OPTIONAL
                                // If supplied, triggered when a hander is unregistered (covered later). 
                                // Enables you to provide lifecycle to responsive widgets. 
                                // Put cleanup logic here.

}).listen(); // More on this next

[来自文档]

编辑：如果你想通过 js [不依赖监听器] 添加纯 CSS 规则，我认为这是不可能的。

【讨论】：

【解决方案2】：

您可以使用 responsive.js 库渲染动态 css。它可以帮助您动态定义将在客户端呈现为本机 CSS 的响应规则。它使用流畅的界面编程风格，并且在不支持媒体查询的情况下也可以工作（动态呈现当前有效规则）。

例如，您可以将宽度属性定义为：

r$.breakpoints(320,767,1280);
r$.set('width','px').values(100,300,1500).linearInt().applyTo('.class');

更多信息、下载和示例在：

http://www.responsivejs.com

【讨论】：