瀏覽器大小屏適配的方法，瀏覽器大小適配

瀏覽器大小屏適配的方法，瀏覽器大小適配

    分到為我們的用戶端產品做一個下載頁面。設計師分別給了大屏和小屏的切圖，那麼問題來了，如何根據螢幕的大小顯示不同的圖片？這個之前沒做過，一個同事提示，用js擷取瀏覽器的大小，動態替換圖片。方法肯定可行，但是感覺很麻煩。產品經理要求做成跟QQ下載頁相似的效果。為何不去研究下QQ下載頁的方法呢？

    在筆記本和台式機上開啟QQ的下載頁，審查元素，大屏用的大圖，小屏用的小圖。他們引用的css檔案不一樣。小屏引用的css檔案頭有這樣的代碼：

@media screen and (max-height: 800px)

    百度了下這個代碼的功能，是多媒體查詢，可以針對不同的螢幕尺寸設定不同的樣式。這個才是解決大小屏問題一劍封喉的捷徑。