4 Media Query的使用方法(上)
50.png
51.png
52.png
在學(xué)習(xí)Media Queries模塊前， 先通過一個(gè)響應(yīng)式布局實(shí)例总滩，來了解一個(gè)響應(yīng)式布局和Media Queries的簡(jiǎn)單應(yīng)用男摧。
在本例中索绪，使用HTML5的結(jié)構(gòu)元素定義了5個(gè)盒子契吉。當(dāng)瀏覽器窗口尺寸不同時(shí)宅荤，頁(yè)面會(huì)根據(jù)當(dāng)前窗口的大小選擇使用不同的樣式。
當(dāng)窗口寬度在1000px以上時(shí)浸策， 頁(yè)頭和頁(yè)腳分別在頁(yè)面的最上方和最下方整行顯示冯键，中間主體分為三列顯示。
當(dāng)窗口寬度在640px以上庸汗、1000px以下時(shí), 中間的第三列隱藏惫确。
而當(dāng)窗口寬度在640像素以下時(shí)，5個(gè)區(qū)塊從上往下排列顯示蚯舱。
在各自不同窗口大小的子樣式區(qū)域中雕薪，可以繼承全局的樣式， 只要重新設(shè)置的需要改變的樣式即可晓淀。另外所袁，有一些次要的區(qū)塊內(nèi)容為了頁(yè)面擺放合適，可以隱藏它
