如何學習響應式網頁設計 如何提高學習效率

我在幾天內學會了響應能力，在此之前，我只能製作基本的網頁，對瀏覽器相容性知之甚少。

在製作響應式網頁時，只需要明確一點，那就是不要把網頁的布局弄亂，對框的位置控制比較嚴格。

響應式網頁的一般布局是從盒子的上到下，一次慢慢堆放乙個盒子，然後從左到右放置在盒子內部，嚴格控制高度和寬度，避免超標和錯位。 這樣一來，就可以避免在處理響應能力時出現各種問題，增加**的數量，簡化並直接從一開始的布局決定後續進度，也是最關鍵的地方。

其次是使用了 CSS3 的各種屬性，其實響應能力不一定非得是 H5，主要作用是 CSS3 的新支援，以我的經驗來說，本質上還是相容 IE8 和 HTML4 比較好。 在 CSS3 中，對螢幕解像度的判斷（具體來說可以），基本上決定了一切的響應性，其實 Bootstrap 的網格布局是乙個很好的參考，不同解像度下 div 寬度的減小，以及隨著內容增長自動跟隨的框高，都是很好的參考。

同時，響應能力也需要一些JS基礎，對於螢幕解像度監控，我現在依靠JS來解決相容性問題。

以上是個人經歷的簡單描述，其實關鍵是HTML的基礎決定了一切，只要你多做實際專案，你的想法就會變得非常清晰。

我是怎麼知道的？ 答案是公司逼迫的，如果學不著回應，可能就過不了考核期，所以短短四天就能學會做專案，最明顯的感覺是，只要專案多做，就算是研究其他網頁， 你可以感覺到法律。

1. 學習 CSS3 的基礎知識。

media (min-width:760px)}media (min-width:1000px)}media (min-width:

1200px）} 它們位於平板電腦、台式機和寬屏下方。容器下方的寬度。

3、學習網格族系統，詳細可參考。

4. 希望對你有幫助。

首先，在編寫頁面時，要準備乙個響應式網頁，使用100%的寬度，不要設定固定的高度。

設定 meta 以適應移動頁面。

了解PC端主流的顯示解像度，設定顯示斷點，比如1920*1080通過**查詢設定1920寬度的顯示模式，1600*1200，設定1600寬度的顯示模式，其實一般都是1200以上設定相同的顯示模式，主要是顯示解像度低， 如 800 * 600 設定其顯示模式，xs：576px sn：576px md：768px lg：992px xl：1200px xxl：1600px

一般來說，**查詢需要設定的PC端範圍就是這些。

在移動端，一般不是通過**查詢設定的，先用js將單位設定為rem，即1rem=100px

在本例中，預設字型為 ; 將框的寬度設定為 100% 的寬度，並讓它適應螢幕。

如果使用框架，還可以將其與柵格系統組合以實現響應相容性。

其實移動端的相容性是最麻煩的，因為手機品牌的種類很多，系統一般分為Android和iOS，但也有系統版本、問題，不同的系統版本會有不同的顯示方式（尤其是iOS系統）。

Android主要在品牌型別上有所不同，螢幕解像度不同。

如果要做基本相容性，需要先設定元，然後將寬度設定為100%。

不要設定寬度和高度，預設寬度自動為100%，高度被子元素改為拉伸，然後通過js函式寫入px的計算值將其轉換為rem單位，肯定很難肯定執行版本的響應式設計必須從頭開始設計，否則， 那些以後幾乎要改變它的人都想重構。

1.您可以在移動端進行除錯，通過CSS查詢適配移動端。

如何快速輕鬆地實現響應能力。