響應式簡介

1. 前言

響應式就是一個網站能夠兼容多個終端，而不是為每個終端做一個特定的版本，這個概念是為解決移動互聯網瀏覽而誕生的。

無論你的屏幕多大，小一點的屏幕(手機)可以一行行的排列，中等一點的屏幕(平板電腦)可以兩列三列的那么排布，更大的屏幕(PC電腦)則可以展示更多的列，因為電腦屏幕的寬高比恰巧與手機相反嘛(寬比高大)。

2. 響應式布局

響應式布局通常分為三種：

• 一種是利用彈性盒子Flex、網格布局Grid或左浮動法Float等 CSS 屬性來實現的在一列上根據屏幕大小的不同而進行自動換行。

• 另一種是利用媒體查詢來根據當前屏幕大小來運行相應的 CSS 代碼。

• 還有一種是利用 JavaScript 來獲取窗口寬高來動態操作 DOM 元素。

本章我們將重點講解前兩種，因為《移動端布局》這門課是從《CSS 布局》這門課程中拆分出來的，所以能不用 JavaScript 就盡量不用 JavaScript。

由于漸隱漸現那兩小節必須要獲取到屏幕滾動的位置才可以做得到
而且不想讓同學們錯過比較常見的這么一種需求
所以才不得已的用到了一點點的 JavaScript

3. 小結

響應式布局非常適合那種想要在各種不同設備上都能夠流暢顯示的網站。

響應式的使命就是：一套代碼 四處運行