基於媒體查詢的不同形式

我有一個包含大量選項的表單。根據屏幕尺寸的不同，我想要以不同的方式顯示這些選項。如果它是一個大屏幕，我想將它們顯示爲常規列表，每個項目都有一個複選框。如果它是一個小屏幕，我想有一個選擇字段。這可能嗎？而且 - 如果是 - 如何？基於媒體查詢的不同形式

大屏幕：

<form> 
    <ul> 
     <li><input type="checkbox" name="category[]" value="1" checked="checked"/>Text</li> 
     <li><input type="checkbox" name="category[]" value="2"/>Text</li> 
    </ul> 
    </form>

小屏幕：

<form> 
    <select name="rating" multiple="multiple"> 
     <option value="1">Text</option> 
     <option value="2" selected="selected">Text</option> 
    </select> 
    </form>

來源

2014-02-12 drhirn

最簡單的方法將是 - 顯示/隱藏元件（選擇或UL）由mediaquery：

例如，對於低屏幕：{display：none;} - 用於ul和{display：block;} - 用於選擇

來源

2014-02-12 09:38:43

是的。但是，在源代碼中仍然存在這兩種情況。如果用戶提交表單，則總是會提交小屏幕表單中的值（最後一個表單）。 – drhirn

這不是css問題。這是PHP的問題。你可以通過JS解決它。在選擇一些checboxes - 改變選擇的價值！當你選擇另一個選項 - 更改複選框:)這很容易。 ;）你能行的！我相信你！ –

呵呵:)。 Thx，好主意！我會盡力。 – drhirn

從UX角度來看，它表示在大屏幕上，用戶可以選擇多個值（它是複選框），而在較小的屏幕上，它們只允許1個值。

從編碼維護的角度來看，如果您有兩套表格，這意味着您需要更改每個選項更改的兩個值。

首先，我想要確定它是否真的想要你想要的：用戶在更大的屏幕上有更多的選擇，而在更小的屏幕上只有一個選擇。

來源

2014-02-12 09:47:44 Jennift

你說得對。我忘了給選擇添加「多個」。 – drhirn

基於媒體查詢的不同形式

回答

相關問題