在移動時代，單純學了DIV+CSS布局遠遠不夠，還要學習響應式布局將設計的網頁能在所有設備都能顯示出最合適最好看的效果。說到響應式布局，可以學習和使用這類優秀的響應式框架，但是覺得太過臃腫或不自由，意圖自己寫輕量快速簡單的代碼的話，那就有必要學習CSS3和HTML5的新特性了。如果還是猶豫不知學習哪個的話，個人建議先學習HTML5和CSS3作為基礎，那樣在需要使用來快速開發的時候只需一小時就學會了。
最簡單的響應式就是應用CSS3的@media媒體查詢，簡單來說就是CSS代碼也能判斷當前使用的設備是屏幕還是打印機還是投影儀等等，然后根據不同設備寫相應的代碼來顯示最佳的效果，老實說，個人最喜歡CSS，易學，直觀，優雅，強大，跟JSON一樣，寫起來特別舒服和快捷。
首先來看一下最簡單的@media的用法代碼：
Document
Hello,world!
看注釋應該能看懂吧，一般我寫的注釋只有我能看懂，所以我經常在項目里面注釋/*如果你意圖嘗試修改我的代碼，建議你放棄或重寫吧，因為經過我優化的代碼沒人能看懂*/，雖然自認自己代碼寫得也不是特別好，但是我還是要裝下逼，萬一高手將我代碼改得更好我能學習一下，萬一碰到新手那我在其眼中就是大神了。回到正題，如果改一下上面style里面的代碼，同樣也能實現相同的功能：
/*如果設備屏幕最小寬度為600像素，則h1的字體顯示綠色*/
@media screen and (min-width:600px){
h1{
color:green;
}
}
/*如果設備屏幕最小寬度為900像素，則h1的字體顯示粉紅色*/
@media screen and (min-width:900px){
h1{
color:pink;
}
}
/*如果設備屏幕最小寬度為1200像素，則h1的字體顯示藍色*/
@media screen and (min-width:1200px){
h1{
color:blue;
}
}對比兩種功能一樣的代碼，我強烈推薦使用第一種方式，因為可能能減少瀏覽器的解析（為什么是可能，自己弄懂去）從而加快那么一點點速度響應式網頁應該學什么，不過天下武功，唯快不破，所以快那么一點也是值得的。如果你是那么好學而勤快和謙虛的學生，也許你已經將上面的代碼敲進或者Atom或者其中編輯器并打開在瀏覽器看效果了，你會發現，字體的顏色沒變嘛，別急響應式網頁應該學什么，點擊你瀏覽器右上角最小化旁邊的窗口，然后將窗口橫向拖著縮小窗口，你會驚奇地發現字體變色了，將瀏覽器的寬度拖到最小，再慢慢拖大，感受一下響應式的魅力吧。
那么我的這篇在床上躺著寫出來的博客寫完手工結束了嗎？不，當然還沒結束，我還要再講多一點點東西，不過我不太喜歡多說，直接上代碼，代碼是最好的描述方式：
Document
LOGO
內容
同理，勤奮好學的童鞋已經開始看這串代碼的效果了，瀏覽器拖來拖去，畫面變來變去好好玩對吧，眼尖的童鞋不覺得好玩了，因為會發現有那么一點點的問題，就是小于600像素的查詢樣式居然會延續應用了小于900像素的樣式，這個是BUG嗎？不是BUG，學過CSS都知道最新的樣式會覆蓋之前的樣式，所以要么就在需用回之前的樣式地方重新寫樣式，要么偷懶還有一種方式，就是媒體查詢還有一種語法：
@media screen and (max-width:1200px) and (min-width:900px)
@media screen and (max-width:900px) and (min-width:600px)
看得懂嗎？應該一眼就看懂是什么意思了吧，如果看不懂真要面壁思過了，如果苦思冥想還是不懂，那就是我的問題了。到了這里，你應該了解到響應式要怎么寫代碼了，不過響應式設計知識網頁設計的冰山一角，而且像這篇文章的內容不少書籍和大神的博客老早就寫了一大堆。最后，當你在瀏覽器放大縮小做響應式網站做得很爽的同時，千萬要記得在標簽加這串代碼：
沒有這串，你手機顯示的效果就不忍直視。這個是H5的meta新用法，想要改一下或了解更多屬性的值和用法的請參閱手冊或者W3C文檔。謝謝觀看。