響應式HTML（和CSS）

-2

我對響應式網站並不熟悉，並且希望開始創建一個將所有屏幕都考慮在內的網站。響應式HTML（和CSS）

很明顯，媒體查詢是要走的路，但他們只關心CSS。

在我當前的項目中，我想根據頁面的寬度（完全不依賴於設備）來組織頁面。事情是，在小的寬度上，我希望HTML佈局完全改變，所以我將不得不使HTML「響應」，以及它應根據網站的寬度而改變。

我該如何做到這一點？是否有任何js庫（jQuery，如果可能但不是強制性的），將根據頁面的寬度「提供」另一個html頁面？

整個網站應該以這種方式構建，因此腳本應該不僅僅是一個小工具，它應該足夠堅實，以允許整個網站依賴它。當然，它可以在任何設備或屏幕或瀏覽器上工作。

有人會說，我在尋找適應性技術而不是響應式技術，但我相信這是兩者之間的混合體，因爲這些元素在一般情況下仍然會有反應，但是在一些關鍵的斷點之間，它確實會適應並改變HTML。

我讀了很多關於不同的技術，但我找不到適合我需要的東西。任何鉛將不勝感激。

謝謝你的幫助。

來源

2014-04-17 Baylock

這對CSS Media Queries和JavaScript都是可能的 - 但可能不太實用。嘗試查看諸如Twitter Bootstrap和Zurb Foundation之類的東西，它們都提供用於設計/開發的完整CSS框架 – series0ne

試着瞭解什麼是CSS mediaquery，您會得到響應式網站的想法 – ShibinRagh

你所描述的是自適應交付。您想要使用服務器端語言檢測用戶代理字符串，然後根據設備是手機，平板電腦還是臺式機有條件地呈現模板。實際上，您將在屏幕之間共享大量代碼，但您可能會有不同的導航佈局，或者選擇不在較小的屏幕上顯示更豐富的功能。這種方法不僅可以節省一堆隱藏/顯示代碼，而且還可以在小屏幕上節省大量開銷，否則您將無法加載隱藏在整個時間的內容。

來源

2014-04-17 12:16:26

這正是我想要的（但存在設備不可知，因爲我不想在任何地方指定任何設備）。但我仍然在尋找那些沒有找到它的東西。如果我沒有錯，用戶代理將分離瀏覽器或設備，而不是寬度，這是我需要的。我找到了「response.js」，但它不會切換整個html標籤，它只是允許更改一些div標籤和src。 – Baylock

這是一個艱難的。如果你想使用它，你可以使用諸如Backbone或Angular之類的東西來設置客戶端視圖，然後使用窗口大小調整事件來觸發備用內容加載。 –

是否有可能使用現有的CSS框架（如Bootstrap）來實現各種目標瀏覽器寬度和設備類型的響應式設計？

Bootstrap特別允許您指定不同的佈局，具體取決於頁面渲染時的設備寬度。 More information here - 調整您的瀏覽器寬度以查看它的行動。

如果在對現有框架進行評估之後，仍然決定開發自己的框架，則至少可以將Bootstrap或其他框架中的技術作爲自己的起點。

來源

2014-04-17 12:29:56

我閱讀Bootstrap文檔，我得到了響應式的東西和工具箱的概念，但我仍然沒有看到如何根據窗口的寬度來改變我的HTML。 – Baylock

我猜Bootstrap的目的是爲了抽象出你需要擔心產生不同的Html，這取決於你的用戶使用的視口/瀏覽器寬度。而對於需要更明確地顯示特定寬度顯示內容的情況，則可以使用響應式CSS實用程序類（請參閱上面的更多信息鏈接）。 –

似乎仍然存在誤解的是，我並不是在尋找一個只能看到不同寬度的網站，我希望它在不同寬度的結構中看起來完全不同，而在某些關鍵斷點之間有響應。因此，這不是爲了適應空間而隱藏/顯示/移動一些元素到另一個元素，而是關於在兩種尺寸之間更改整個HTML並帶來完全不同的體驗。我認爲我們可以根據大小更改整個HTML，但看起來這是不可能的。我可以使用Bootstrap，只要它符合我的需求，但事實並非如此。 – Baylock

根據設備和屏幕寬度，您可以使用CSS和媒體查詢來改變頁面佈局（「完全」）。如果我是你，我會深入探討這些技術可能提供的可能性。

如果你是積極的，這是不夠的。我會考慮Redirects and User-Agent Detection根據用戶代理將用戶重定向到不同的頁面。

如果您正在尋找一個完整的框架，可以同時處理您需要的任何內容（重定向和動態內容取決於用戶代理或寬度）以及更多內容，您應該查看AngularJS。

你當然可以根據你的標準用純JS做一些DOM操作，但是隨着你的項目變得越來越大，你可能會陷入一個受到傷害的世界。

來源

2014-04-17 12:42:39 Liren

嘗試Bootstrap

引導，使前端Web開發更快，更容易。它適用於所有技能水平的人員，各種形狀的設備以及各種規模的項目。

來源

2014-04-17 12:45:08

對不起，但這是一個商業，而不是我的問題的答案。 – Baylock

!!!!!!!!!!!!!!!!!!!!! Bootstrap是開源框架 –

根據MIT –

我不知道它是否足夠您的項目，但您可以在一定程度上使用CSS來控制您想要顯示或隱藏在較小或較大設備上的標記。例如：

<div class="mobile-only"> 
     <p>This content will only be visible on small screens such as mobile devices</p> 
    </div> 
    <div class="tablet-up"> 
     <p>This content will only be visible in tablet and larger devices</p> 
    </div> 

    /* media query for small screens, such as mobile devices */ 
    @media screen and (max-width: 767px) { 
     .tablet-up { 
     display: none !important; 
     } 
    } 

    /* media query for tablet and larger devices*/ 
    @media screen and (min-width: 768px) { 
     .mobile-only { 
     display: none !important; 
     } 
    }

但可以肯定的是你，如果你有一個非常大的項目不使用這種技術，你可能會結束了窒息的性能。

來源

2015-05-26 07:47:42

響應式HTML（和CSS）

回答

相關問題