使用CSS媒體更改自定義元素css屬性的樣式

我正在嘗試使響應式web和我有一個小問題。每當我想改變一些基於CSS媒體的自定義CSS屬性，它將不適用。使用CSS媒體更改自定義元素css屬性的樣式

例如：我試圖根據當前活動的CSS媒體更改iron-icon的大小。我有以下：

<iron-icon icon="battery" class="battery"></iron-icon>

和CSS：

iron-icon.battery { 
    --iron-icon-height: 2.3em; 
    --iron-icon-width: 2.3em; 
} 

@media screen and (max-width: 1000px) { 
    iron-icon.battery { 
     --iron-icon-height: 1.5em; 
     --iron-icon-width: 1.5em; 
    } 
}

電流輸出：僅1尺寸被選擇，而另一個被忽略。例如，如果我以小於1000px寬的分辨率打開窗口，則選擇1.5em。當我打開寬度超過1000px的窗口時，選擇2.3em。但是，當我手動更改窗口的大小，而其他@media不適用。

有沒有辦法來achiev這一點沒有使用JavaScript（我試圖避免設置新的類並刪除舊）現在好像你的CSS與類「鐵圖標」瞄準一個元素

來源

2017-10-12 Kuba Šimonovský

我寫了一個快速小提琴[這裏]（https://jsfiddle.net/f59y7yg7/），我希望複製你的代碼。另外，我用'min-width'媒體查詢編寫了一個版本，我認爲這是一種更好的響應式web開發方法，因爲您可以逐步增強（「移動優先」方法），而不是不斷覆蓋CSS縮小比例（可能遇到很多特殊性問題 - 我認爲這可能會導致您的問題）。如果這些例子適合你，你能告訴我嗎？ –

@TomOakley感謝您的時間。實際上，在我的應用程序中，我無法做到「先移動」。因爲我們公司沒有時間，所以我只能在很短的時間內爲電腦申請。當然現在我們還必須實現移動。重寫整個項目是無稽之談。不幸的是你發佈的是正常的CSS屬性。在聚合物中有特殊的屬性傳播到自定義元素，以便您可以對其進行設計。這是問題的核心。當應用媒體查詢時，他們只是沒有得到更新 –

啊，當然，我認爲聚合物標籤和CSS是無關緊要的，並且CSS導致了問題。從未使用聚合物，所以我會把它留給你。抱歉。 –

和「電池」。實際上你想用一組「電池」作爲目標。

只需在iron-icon.battery之前刪除點。

iron-icon.battery { 
    --iron-icon-height: 2.3em; 
    --iron-icon-width: 2.3em; 
} 

@media screen and (max-width: 1000px) { 
    iron-icon.battery { 
     --iron-icon-height: 1.5em; 
     --iron-icon-width: 1.5em; 
    } 
}

來源

2017-10-12 12:31:28

複印文本時只是輸入錯誤。否則鐵圖標不會得到任何選定的尺寸... –

使用CSS媒體更改自定義元素css屬性的樣式

回答

相關問題