Shopify液碼，如何使用screensize

Question

我想顯示用於在桌面上選擇變體的單選框和下拉菜單，而在移動設備上僅顯示下拉菜單。

目前，它在兩者上都顯示了桌面變體。 而且我必須在液體代碼中有所不同，它會在屏幕尺寸之間創建下拉菜單/單選框。 這樣它就可以創建正確的元素。

但作為液體，它之間不能有區別。 我需要一個解決方法。

我也不能在它周圍加上一個和 js 不同的地方，因為它里面的液體代碼不再起作用了。

有人知道解決方法嗎？

謝謝！

Answer 1

最輕量和優化的解決方案是使用帶有媒體查詢的 CSS class 而不是 JS。 如果您的樣式表還沒有這種實用程序類，您可以創建一個。

因此，在您的 HTML/Liquid 代碼中，您可能會編寫如下內容：

<div class="checkbox-container hide-tablet">
    Your checkbox code
</div>

在您的 CSS 樣式表中：

@media screen and (max-width:912px) {
    display:none;
}

HTH

Answer 2

如果有人也有同樣的問題，我找到了某種解決方法。

我為這個選項創建了兩個需要的元素（下拉框和單選框），然后根據屏幕大小刪除其中一個：

if (screen.width < 912) {
  var child = document.getElementById("packaging-selection-desktop");
  child.parentNode.removeChild(child);
}
else {
  var child = document.getElementById("packaging-selection-mobile");
  child.parentNode.removeChild(child);
}