想做前端的響應式布局應該從什麼知識入門呢？

01-29

響應式布局

謝邀。

前端響應式最好的入門方法是去學習 Bootstrap，我當年學響應式布局也是從 Bootstrap 學起的。學 Bootstrap 並不是一件什麼特別難的事，因為官方文檔寫得挺詳細的，甚至中文版的文檔翻譯得也不錯。

但是，請不要認為把 Bootstrap 學好了就相當於把響應式布局學好了。我最近開的《前端工程師的自我修養》Live 中有一個問題：當我們在學習一項技術時，我們在學什麼？代入到這個話題中的話，那就是當我們在學習 Bootstrap 的時候，我們在學什麼？

在使用 Bootstrap 時，我們可能往往最先學習的會是它的柵格系統（Grid System），在我剛學的時候，我就在想：這東西又把頁面切成一塊一塊的了，這跟我們已經淘汰了的表格布局有什麼區別啊？！在我學完之後，我才發現，原來柵格系統是相當於吸納了表格布局的思想，然後結合響應式布局的思路，使我們的布局更加方便。

在上面這個過程當中，我學習了它的理念。

然後，我又會想：如果這個東西讓我來實現，我會怎麼寫？當時作為初學者的我花了一整個下午去設計和實現，完成之後，我把我的代碼跟 Bootstrap 的源碼對比一下，發現原來還有一些細節我沒有處理，並且某些地方 Bootstrap 用了更優雅的方法去實現。

在這麼一個過程當中，我有了自己的思考，學習或鞏固了以前的知識，並學習了別人的代碼組織的方法以及具體的實現。

所以，如果想成為一個可持續進步或者要突破初級工程師瓶頸的前端工程師，我們應該意識到：當我們在學一項技術的時候，我們不只是在學這項技術。

想了解更多關於「如何成為優雅的前端工程師」的問題，歡迎參加我的知乎 Live - 《前端工程師的自我修養》

詳細看看bootstrap的文檔及實現，看不懂的地方查mdn

看Bootstrap源碼

首先學好布局，然後學習media query，不同media query下應用不同的布局，簡單么？先學好布局吧，輕鬆把東西放到你想放的位置，如果達到這一步了，響應式布局就不難。

我學前端是從html學的學完了以後再去學什麼呢

響應式布局的理論是很簡單的，有html跟css基礎的人理解跟運用都不難。

僅靠谷歌搜索相關的博文就足夠學習。

不了解樓主的水平怎麼樣，如果是前端剛入門的話，建議先看《CSS權威指南》、《響應式Web設計(HTML5和CSS3實戰)》這兩本書。

建議看完上面兩本書後再看 boostrap。 boostrap 含很多跟響應式無關的東西，它的柵格是響應式的，可以去看這部分的代碼。

另外響應式布局的目的是使不同解析度、寬高比的設備都能有比較好的布局與體驗。實現這個目的在不同的需求下有不同的方法，除了響應式布局外還有使用 rem、viewport 等，建議樓主也可以了解下。

響應式布局是很簡單的，樓主如果基礎可以的話，搜搜相關文章看看應該能很快掌握。

我也是新手啊。不過書籍的話，有一個本這個《響應式Web設計(HTML5和CSS3實戰)》。

入門的話，我想還是要先了解瀏覽器兼容性吧，布局思想吧。也在學習中