響應式設計（一）

通過css3 media query實現響應式web設計

一、響應式設計（一）響應式設計初識，乙個小小的demo，用來理解什麼是響應式

今天的乙個小小的demo，讓我重新的認識了什麼是響應式網頁設計。我之前一直以為主要乙個網頁在不同的裝置上瀏覽，網頁可以自適應裝置的螢幕大小，而不發生結構變形。

其實我覺得更準確去說是：根據不同的使用者裝置環境，頁面可以做出不同的響應動作，

響應式web設計(responsive web design)的理念是：

頁面的設計與開發應當根據使用者行為以及裝置環境(系統平台、螢幕尺寸、螢幕定向等)進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和布局、、css media query的使用等。無論使用者正在使用筆記本還是ipad，我們的頁面都應該能夠自動切換解析度、尺寸及相關指令碼功能等，以適應不同裝置；換句話說，頁面應該有能力去自動響應使用者的裝置環境。響應式網頁設計就是乙個**能夠相容多個終端——而不是為每個終端做乙個特定的版本。這樣，我們就可以不必為不斷到來的新裝置做專門的版本設計和開發了

三、用乙個最簡單的小demo來理解什麼是響應式設計，以及是如何設計

>小紅在認真學習。。。。

section

28body

29html

解釋一下上面幾行**的含義：

**行5——表示最新版本的ie核心進行渲染。不理解可以看看這個

**行9——引入乙個css重置檔案，網上搜尋的到，下下來就是。

**行10-13——是為了相容ie9瀏覽器，這是引入別人寫好的js檔案。省去我們在開發過程中要去判斷ie9是否支援這個標籤的步驟。因為這個在html5shiv.js,別人幫我寫好了。

1
.head
9.menu
16.menu ul
19.menu li 
27.main
3435
@media all and (max-width:300px)42}
43@media all and (max-width:900px) and (min-width:300px)
49}

css檔案說明：

有三個div，頭部head、中間contain部分，以及在頭部給出了乙個書寫導航欄的menu。可以試試用瀏覽器正常開啟，看到的結果是這樣的：

可以看到三個div的排版是這樣的。

哈哈，下面就開始做一些響應式的內容了。

實現響應式的標籤是@media

我就根據裝置的最大寬度為300px和600px到900px時，讓瀏覽器做出不同的響應。

（1）最大寬度為300px，瀏覽器的響應應該是：頭部div變成乙個高度為粉色、高度為50px的div

@media all and (max-width:300px)

在@media 裡面，寫上你，當裝置環境改變，要發生響應的樣式內容。例如：上例的

.head{

width:50%;

height:50px;

background:pink;

這就是對headdiv做出響應

縮小瀏覽器視窗，看到了頭部的div變成了高度為50px的粉色div（ps：暫時先不要管藍色跟紅色的div，樣式很醜，因為我沒有設定對著兩個div根據設定環境也做出不同的響應。哈哈，所以暫時忽略。在這裡要了解的是什麼是響應式，頭部head div是如何響應的）

（2）寬度為600px-900px

同理的，縮小瀏覽器視窗到一定範圍內，看到乙個黑色的頭部div。

四、總結

響應式設計的小demo，寫篇日誌，紀念一下，哈哈

在響應式的學習路上，我想進步！

響應式設計（一）

響應式web設計（一）

響應式設計

響應式設計

相關推薦