移動友好的響應式jQuery標簽

Question

我正在尋找一些基於jquery的插件（如果可用），這些插件會從常規選項卡中自動更改為可響應的可折疊容器，以實現移動友好。

有人可以幫忙嗎？

Answer 1

您可能需要看一下jQuery Mobile項目。 jQuery Mobile是開發移動Web應用程序的一個很好的開始。 可折疊容器的示例可以在jquery Mobile文檔Collapsibles中找到 。 如果您喜歡該示例，請查看jQuery Mobile 。

Answer 2

簡單，可定制和響應

Twitter引導選項卡

Answer 3

您可以使用媒體查詢根據規格更改每個元素的樣式。 您必須將這些添加到樣式表的底部，或創建一個新的樣式表（例如repsonsive.css），以便它根據屏幕尺寸覆蓋默認樣式。

以下以下媒體查詢模板僅基於屏幕尺寸。 您也可以使用更復雜的媒體查詢來定位特定設備。

為了支持較舊的瀏覽器（IE），您必須使用條件語句來包含response.js或media-queries.js。 媒體查詢僅適用於設備規格，例如屏幕，手持設備等。

例如：

/* Large desktop */ 
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

基於回答這個從以前的stackexchange問題的鏈接。

-

如果您偏愛僅使用jquery插件，則可以使用以下命令：
帶有此Jquery插件的 ResponseJS