css中@media寫法在ie 、firefox、Opera、Chrome、Safari 瀏覽器中的支援

@media only screen and (min-width: 1024px)最小寬度1024

Safari 版本5.1。7（7534.57.2）支援
chrome 版本26.0.1410.64  m 支援
opera 版本12.15 支援
fireFox 版本21.0 支援
IE10 版本10.0.92000.16580  支援

@media only screen and (max-width: 1024px)最大寬度

同上都支援

@media only screen and(min-width:800px) and (max-width:1024px)  寬度大於800 小於1024

Safari 版本5.1。7（7534.57.2）b支援
chrome 版本26.0.1410.64  m 支援
opera 版本12.15 不支援
fireFox 版本21.0 不支援
IE10 版本10.0.92000.16580  不支援

@media screen and (max-device-width: 1366px) 裝置螢幕寬度小於1366

Safari 版本5.1。7（7534.57.2）支援
chrome 版本26.0.1410.64  m 支援
opera 版本12.15 不支援
fireFox 版本21.0 支援
IE10 版本10.0.92000.16580  支援

這種寫法我們電腦測試的時候多數是不能出現效果的，應為需要設定我們裝置的螢幕大小，我的電腦是1366*768的，所以設定成1366，如果變成1024或其他的數字，是看不到效果的，（除非在調整螢幕解析度）

@media screen and (min-device-width: 1366px)  裝置螢幕大於1366

同上

例外：opera 在用@media screen and (min-device-width: 1366px)和@media screen and (max-device-width: 1366px)的時候，有一個很有趣的現象，我把解析度調成1024*800的時候把最大寬度調成1366後他是可以用的，同理最小款款調成800也管用了，有些搞不懂了，如果哪位大牛知道，請指導一下！！！

 

@media(max-width:1024px)

Safari 版本5.1。7（7534.57.2）支援
chrome 版本26.0.1410.64  m 支援
opera 版本12.15 支援
fireFox 版本21.0 支援
IE10 版本10.0.92000.16580  支援

@media(min-width:1024px)

Safari 版本5.1。7（7534.57.2）支援
chrome 版本26.0.1410.64  m 支援
opera 版本12.15 支援
fireFox 版本21.0 支援
IE10 版本10.0.92000.16580  支援

 

如果有什麼些的不對，請各位及時指出，在下這裡感謝了！！！