從JQuery調整時不會觸發的響應式設計

當JQuery發生更改時，我的響應式設計不會觸發嗎？從JQuery調整時不會觸發的響應式設計

例如，當我編輯的寬度， jsfiddle.net/odsotmpr/

<div class="test"></div>

$(".test").click(function() 
{ 
    $(this).css('width', '200px'); 
});

.test 
{ 
    width: 150px; 
    background-color: red; 
    height: 150px; 
} 

@media only screen and (max-width : 820px) { 
    .test 
    { 
     width: 70px; 
    } 
}

我試着用!important爲響應寬，但話又說回來，如果我想要以編程方式更改寬度（th粗糙的JQuery）這是不可能的。

來源

2015-07-12 Bilal075

甚至'！important'不應該重寫內聯樣式。你在想什麼？ –

@TrueBlueAussie嗯，我試圖創造一個'懸停'效果，只要我把物品盤旋。懸停效果基本上增加了寬度和高度。但該網站也對其他設備作出響應。所以我目前面臨的問題是，只要響應式設計被觸發，我就無法'調用'我的懸停效果。 – Bilal075

如果你想懸停效果只改變高度和寬度，爲什麼不在CSS中使用'：hover'，這樣你的媒體查詢不會被取決於javascript –

問題是內聯樣式將始終優先於CSS規則。改用另一個css類可能是最好的。

像這樣：

的Javascript

$(".test").click(function() 
{ 
    $(this).addClass("clicked") 
});

的CSS：

.test 
{ 
    width: 150px; 
    background-color: red; 
    height: 150px; 
} 

.clicked{ 
    width: 200px; 
} 

@media only screen and (max-width : 820px) { 
    .test 
    { 
     width: 70px !important; 
    } 
}

http://jsfiddle.net/DarthDerrr/odsotmpr/1/

編輯 - 因爲寬度是動態的，一個窗口大小調整處理程序可以用來代替：在這種情況下，（我真的不喜歡usi ng listener to window.resize出於性能的原因），但類似這樣的事情是可能的：http://jsfiddle.net/DarthDerrr/odsotmpr/2/ - 使用window.resize處理程序 - 但這只是在絕對必要的情況下。

來源

2015-07-12 16:31:41 DarthDerrr

覆蓋我試過這種方法，但不能瞭解如何向我創建的類添加一個'屬性'（因爲我必須計算寬度和高度）。 – Bilal075

我只在必要時說過，因爲如果頁面有很多事情發生，窗口調整大小偵聽器可能會降低性能。減少這種情況的一種方法是消除窗口大小調整處理程序。 – DarthDerrr

使用javascript更改樣式會將樣式內聯放入HTML中，這會覆蓋CSS中的任何內容。爲了解決這個問題，而不是直接通過JavaScript應用樣式，你可以添加一類具有適當的造型：

CSS

.clicked { 
    width: 200px; 
}

$(".test").click(function() 
{ 
    $(this).toggleClass('clicked'); 
});

來源

2015-07-12 16:31:47

從JQuery調整時不會觸發的響應式設計

回答

相關問題