如何使用Stylish或Greasemonkey替換@media（max-width）？

我在我的桌面瀏覽器上查看this website時遇到問題。他們有一個響應式/流體設計，當瀏覽器寬度小於990像素時，會顯示一個移動菜單按鈕，而不是水平導航欄。如何使用Stylish或Greasemonkey替換@media（max-width）？

由於我使用Firefox的縮放比例爲125％，因此我的桌面瀏覽器的有效寬度小於990像素。

我查看了CSS代碼並找到了該行。如何使用Stylish，Greasemonkey或其他方式自動將「990px」的最大寬度值替換爲「800px」？

@media (max-width:990px) { ... }

我使用的是Firefox 23在Windows 7

編輯：基於評論到目前爲止，我需要用我自己的自定義CSS文件來替換他們的CSS文件。那麼，如何使用Greasemonkey替換href（它似乎是一個非靜態文件名）呢？

<link rel="stylesheet" type="text/css" href="http://d1h60c43tcq0zx.cloudfront.net/static/css/versioned/global-cdn-ac243f54ab6bb9637fcc5fa32f8b514d.css"></link>

來源

2013-09-20 wisbucky

解決此問題的一種過度侵入的方法是編輯您的主機文件並使用其css的本地版本，該版本對您有更好的寬度限制。 – Meximize

就我所知，您無法使用這些擴展名替換此類替換。您只能編寫自己的一組樣式來覆蓋它。 – Jake

的一種方式做到這一點是：

使用在href文本的不變部分查找違規<link>。
記錄該鏈接的href。
刪除該鏈接。
使用GM_xmlhttpRequest()再次獲取文件（希望它被緩存）。
使用正則表達式修復獲取的CSS。使用GM_addStyle()添加固定的CSS。

這裏的一個完整的Greasemonkey腳本，說明了過程：

// ==UserScript== 
// @name  _Replace bad CSS link 
// @include http://www.fleaflicker.com/nfl/* 
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js 
// @grant GM_addStyle 
// @grant GM_xmlhttpRequest 
// ==/UserScript== 

var badCSS = $("link[href*='global-cdn-']"); 
var badURL = badCSS.attr ("href"); 

badCSS.remove(); 

GM_xmlhttpRequest ({ 
    method:  "GET", 
    url:  badURL, 
    onload:  function (rsp){ 
     var betterCSS = rsp.responseText.replace (
      /max-width:990px/g, "max-width:500px" 
     ); 

     GM_addStyle (betterCSS); 
    } 
});

注：

爲了更快/更好的性能，如果CSS纔不是經常更改，手動編輯並將其保存在安裝腳本的同一文件夾中。然後使用GM getResourceText()獲取CSS，而不是GM_xmlhttpRequest()。
如果頁面「閃爍是一個煩惱，由於啓動延遲，這是一個完整的其他問題，那麼可能與@run-at document-start和突變觀察員解決。

來源

2013-09-21 01:40:36

這就像一個魅力。令人驚訝的是，它可以動態地用800px替換990像素，這樣它即使在源CSS改變時也能工作。我甚至沒有注意到任何閃爍。 orz – wisbucky

很好的答案..不幸的是，它只適用於greasemonkey/FF，[這裏]（https://stackoverflow.com/questions/45182275/how-to-override-media-max-width-using-stylish）是一個類似問題專門針對時尚/鍍鉻 – abbood

@abbood，這可以在使用Tampermonkey的Chrome上運行。可能會在幾天後查看您的具體情況。（我很忙，沒有承諾。） –

如果您向Firefox添加Stylish，則可以爲特定域添加樣式。我通常會發現我需要包含!important以及很多款式才能識別它們。

Firefox的另一種選擇是直接編輯userContent.css文件。你可以很容易地谷歌「userContent.css火狐windows7」來找到它的位置。（我用的是Mac）

來源

2013-09-20 23:23:36

我認爲這不適合我的情況，因爲1）@media塊中有〜50個元素。 2）我不能簡單地在每個後面追加'！important'，因爲我需要消除該屬性。所以我需要查看每個屬性的原始值，然後添加'！important'。 – wisbucky

如何使用Stylish或Greasemonkey替換@media（max-width）？

回答

相關問題