5 Media Query的使用方法(下)
50.png
51.png
52.png
在學(xué)習(xí)Media Queries模塊前佛呻， 先通過一個響應(yīng)式布局實例谴古，來了解一個響應(yīng)式布局和Media Queries的簡單應(yīng)用牺蹄。
在本例中惨远，使用HTML5的結(jié)構(gòu)元素定義了5個盒子躯枢。當瀏覽器窗口尺寸不同時，頁面會根據(jù)當前窗口的大小選擇使用不同的樣式司忱。
當窗口寬度在1000px以上時皇忿， 頁頭和頁腳分別在頁面的最上方和最下方整行顯示，中間主體分為三列顯示坦仍。
當窗口寬度在640px以上鳍烁、1000px以下時, 中間的第三列隱藏。
而當窗口寬度在640像素以下時桨踪，5個區(qū)塊從上往下排列顯示老翘。
在各自不同窗口大小的子樣式區(qū)域中，可以繼承全局的樣式锻离， 只要重新設(shè)置的需要改變的樣式即可铺峭。另外，有一些次要的區(qū)塊內(nèi)容為了頁面擺放合適汽纠，可以隱藏它
