在進(jìn)行網(wǎng)站建設(shè)過程中網(wǎng)站的樣式是不必可少的，在以前的時候大多的樣式都需要通過很多的標(biāo)簽或者JS來實(shí)現(xiàn)，其中還有瀏覽器的兼容性問題的存在，后來推出了html5和css3解決了很多問題。

其中@media又叫做媒體查詢，它是css3新出的屬性，是為了解決如：手機(jī)，平板，電腦等不同設(shè)備上html5的樣式不同影響用戶體驗(yàn)，以前會單獨(dú)為手機(jī)端制作單獨(dú)的網(wǎng)站，后來通過媒體查詢來完成手機(jī)的網(wǎng)站改造，也就是常說的響應(yīng)式布局。通過檢查設(shè)備尺寸來對不同的設(shè)備進(jìn)行不同的布局，結(jié)合css3的新屬性，可以快速的將電腦端網(wǎng)站改造成手機(jī)端可以使用的網(wǎng)站，無需再度制作手機(jī)端網(wǎng)站。

在使用@media時需要選擇指定的類型例如：all(全部)，screen(電腦，平板，手機(jī))，print(打印機(jī))，speech(語音識別設(shè)備)。也可以通過描述設(shè)備顯示區(qū)域的寬高來進(jìn)行不同的布局。同時還可以通過orientation來描述設(shè)備的方向，值為portrait(豎屏)或landscape(橫屏)。還有resolution來描述設(shè)備的分辨率。還可以通過and操作符來同時匹配多個條件，或or匹配其中一個條件。

一般而言會使用rem來作為響應(yīng)式的單位，通過@media來修改html的字體大小。在使用媒體查詢時要注意放在css文件的底部，同時按照從小到大的順序進(jìn)行書寫。

@media是一個非常強(qiáng)大的功能可以減少很多不同設(shè)備上頁面問題，同時還可以提高開發(fā)者的效率在以后的網(wǎng)站制作中是必不可少的。