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

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

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

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

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