響應(yīng)式簡(jiǎn)介

1. 前言

響應(yīng)式就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端，而不是為每個(gè)終端做一個(gè)特定的版本，這個(gè)概念是為解決移動(dòng)互聯(lián)網(wǎng)瀏覽而誕生的。

無(wú)論你的屏幕多大，小一點(diǎn)的屏幕(手機(jī))可以一行行的排列，中等一點(diǎn)的屏幕(平板電腦)可以兩列三列的那么排布，更大的屏幕(PC電腦)則可以展示更多的列，因?yàn)殡娔X屏幕的寬高比恰巧與手機(jī)相反嘛(寬比高大)。

2. 響應(yīng)式布局

響應(yīng)式布局通常分為三種：

• 一種是利用彈性盒子Flex、網(wǎng)格布局Grid或左浮動(dòng)法Float等 CSS 屬性來(lái)實(shí)現(xiàn)的在一列上根據(jù)屏幕大小的不同而進(jìn)行自動(dòng)換行。

• 另一種是利用媒體查詢來(lái)根據(jù)當(dāng)前屏幕大小來(lái)運(yùn)行相應(yīng)的 CSS 代碼。

• 還有一種是利用 JavaScript 來(lái)獲取窗口寬高來(lái)動(dòng)態(tài)操作 DOM 元素。

本章我們將重點(diǎn)講解前兩種，因?yàn)椤兑苿?dòng)端布局》這門課是從《CSS 布局》這門課程中拆分出來(lái)的，所以能不用 JavaScript 就盡量不用 JavaScript。

由于漸隱漸現(xiàn)那兩小節(jié)必須要獲取到屏幕滾動(dòng)的位置才可以做得到
而且不想讓同學(xué)們錯(cuò)過比較常見的這么一種需求
所以才不得已的用到了一點(diǎn)點(diǎn)的 JavaScript

3. 小結(jié)

響應(yīng)式布局非常適合那種想要在各種不同設(shè)備上都能夠流暢顯示的網(wǎng)站。

響應(yīng)式的使命就是：一套代碼 四處運(yùn)行