通常我們做一個網頁，通常優先兼容 桌面端、平板端、手機端 三個端，其他則微調，那我們應該如何來做呢？
一般會有設計師 給你三個設計稿，分別是 PC、ipad、mobile 也就是 電腦端、平板端、手機端 這三個設備的。
下面我用 EXLskills 來舉個例子，來實際理解一下。
電腦端PC，一般采用 三列、四列布局，你可以去看看 京東 或者 淘寶 就可以發現，當然也不是死的，特殊情況特殊做法，這里指的是一般情況。
平板端iPad，一般采用兩列布局，因為相對來說平板的屏幕相對於 手機大一點 但相對於 電腦端又比較小,兩列布局的效果無疑是比較常見的做法，下面是一個真實網站的例子。
手機端mobile，一般采用一列布局，手機的屏幕很小，一列可以展示更完整，並且在移動端手勢下滑是非常容易的，所以用戶體驗感也很好，而且不會丟失展示內容，在手機端一般采用 Flex 布局進行一列布局
那怎么實現這個網站的效果呢？
答：采用目前前端流行的 CSS樣式 bootstrap 響應式框架 進行開發，他包含了很多實用的類、比如給你做好了 媒體查詢、多列布局、還有上面效果中導航收縮功能，你可能已經猜到了，沒錯上面的示例網站就是 bootstrap 做的，
簡單介紹下響應式，響應式簡單來說就是 在 不同的設備屏幕上 網站呈現出不一樣的布局效果，就像上面舉列的三個端一樣。
我簡單解析一下這個網站是怎么采用 bootstrap 使網站響應式的。
這個網站使用的 bootstrap 版本，你可能看到了，他還是使用了 CSS變量，所以你在實際使用的時候是可以根據自已的情況加代碼的，bootstrap只是一個你做網站的一個基礎
1.整個網站采用 頭部 + 主體 兩個布局模塊
2. 頭部有一個導航，采用 Flex 布局
3. 在 電腦端 有一個導航條
4.當設備是 手機 或者 iPade 時候將導航條收縮
頭部布局實現方法：
采用了典型的 bootstrap + collapse + Flex 布局 實現收縮 和 響應式，如果你不知道的話我幫你搜了一遍文章： https://www.cnblogs.com/yangchaojie/p/8120549.html
5.主體 布局模塊效果
6.主體在高度上通過 calc 計算，得出高度
7.采用 @media 媒體查詢來在不同端變化高度，這是常用的做法，可以實現在不同的設備下，添加不同的樣式，讓布局改變，所以當然這個網站不止這一處采用了這個做法，如果你不知道媒體查詢的法，我也幫你找了一些不錯的相關文章
http://www.bubuko.com/infodetail-1045273.html
https://www.cnblogs.com/zhaodifont/p/3858657.html
https://www.cnblogs.com/xcxc/p/4531846.html
https://blog.csdn.net/u010510187/article/details/82790963
翻譯不完全，但是介紹的很全，可以搭配上面的看
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries
8.如果你了解 bootstrap 那你一定知道 布局容器
9.頭部采用了 row + col，bootstap 柵格系統 ,鏈接： https://v3.bootcss.com/css/#grid
10.使用了 bootstrap 的 柵格系統 來在不同設備屏幕下分成不同的分辨率
解析：
如果你知道 bootstrap 的柵格系統話, 你可能已經發現了，這個網站的做法。
我們知道 bootstrap 的是12柵格系統, 所以我來解析下這個網站分列做法。
col-12 沒有加sm這樣的媒體查詢前綴，則不管屏幕大小始終占滿12個格子也就是成了一行一列，因為 CSS 是擁有層疊特性的，所以加了媒體查詢前綴的在bootstrap下，優先級是比不加的高的，樣式會被加了前綴的覆蓋掉。
col-sm-6 則是 2列，因為 12 / 6 = 2 所以一行只能占 2 個div 。
col-lg-4 則是 3列, 因為 12 / 4 = 3 所以一行最終只能占 3 個div，也就是 3列 了。
以此類推 12除於 你的想要分的 列數 加上 不同的sm、lg、xl等屏幕尺寸參數，就可以實現，響應式了。
一遍寫這個屬性是從小屏幕寫到大屏幕的，因為這樣更合理更清晰，比如這個網站就是從 手機 > 平板 sm > 電腦 lg
如果你不了解的話bootstrap的話，可以看官方文檔非常的簡單，上手很快，需要你了解一點 html、css的知識，因為他本質上bootstrap還是 CSS 的樣式，簡單點就是別人寫好的 css 樣式，你拿來直接用，但你要起來了解一點，才知道怎么使用。
bootstrap中文文檔：https://v3.bootcss.com/css/#grid
bootstrap英文文檔：https://getbootstrap.com/
另外個人覺得英文文檔比 中文 文檔新，現在 英文 文檔是bootstrapV4版本，中文 文檔還是V3，如果你是從沒接觸過 bootstrap 那我建議你直接看中文文檔，為什么呢？因為 英文 文檔是比較新的版本，但本質上基礎內容和 中文 文檔沒有什么太大區別，所以不用太擔心，文檔過時的問題.
好了，大概的解析了一下這個網站，當然這個網站不只是簡單的使用了 bootstrap 他加上了自已寫的不少樣式，所以實際開發 不單單是依靠一個 bootstrap的，他只是一個基石，我們只是踩在上面。
最后附上CSS 手冊一本： http://css.doyoe.com/