是否有可能編輯不適用於Firebug中的任何內容的CSS規則？

我正在幫助改進一個WordPress的網站與響應式設計。目前，我爲不同的屏幕尺寸設置了媒體查詢，但現在它們中沒有CSS規則。是否有可能編輯不適用於Firebug中的任何內容的CSS規則？

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
/* Styles go here */ 
}

有沒有一種方法可以在Firebug上實時編輯和添加全新的規則到媒體查詢中？這比添加「虛擬」CSS規則更方便，將其放在FTP上，然後在瀏覽器中進行測試並從那裏進行編輯。

感謝

來源

2012-06-26 Code' phyte

如果我正確理解你的問題，不，你不能讓在Firebug的編輯，將永久影響您的網站。您可以更改代碼以查看它的功能，然後將其複製並粘貼到單獨的腳本中。至於你的回答，你最終必須爲它編寫一個單獨的css腳本。

如果你可以（也許是升級），這將是很好，但它可能需要某種密碼用於安全目的，所以不只是任何人都可以編輯它。

來源

2012-06-26 19:59:43 Jeff

我不想編輯Firebug上的東西，並永久影響該網站。當我在Firebug中檢查它們時，我希望能夠做的是添加到空媒體查詢中。我希望我正確地解釋這一點。 –

然後是的，你可以做到這一點。所有你需要做的，點擊源代碼編輯，你可以操縱你的代碼/查詢 – Jeff

是的，你可以，只需點擊CSS選項卡，然後點擊源代碼編輯。然後將您的更改複製到您的實際CSS，如果它是你想要的。請記住，您正在使用min-device-width來定義媒體查詢，因此在桌面上這不會導致任何更改，因爲如果調整瀏覽器大小，設備寬度不會更改。

同樣，您也可以使用Chrome的調試工具 - 我覺得這更有幫助。您可以在「元素」選項卡上對CSS進行更改。然後點擊「資源」選項卡找到您的Styles文件夾 - Chrome會實際告訴您您編輯了哪些CSS文件，並讓他們爲您進行版本管理。只需右鍵單擊並保存與您想要的編輯相匹配的CSS文件的版本。

來源

2012-06-26 20:05:09

感謝您指出min-device-width不會改變！我沒有意識到這一點。 –

不用擔心，Chrome中有一個簡潔的擴展功能，可以根據不同的設備調整瀏覽器的大小（您可以使用它來測試媒體查詢）：https：//chrome.google.com/webstore/detail/kkelicaakdanhinjdeammmilcgefonfh？utm_source = chrome-ntp-icon我讀過一些關於它的好評，也許它可以幫助你 –

非常感謝！ –

是否有可能編輯不適用於Firebug中的任何內容的CSS規則？

回答

相關問題