站長資訊網(wǎng)
在css中，可以使用“@media”規(guī)則根據(jù)不同的屏幕尺寸，來設置不同分辨率的樣式，語法“@media mediatype and|not|only (media feature){css樣式}”。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
在css中，可以使用“@media”規(guī)則來設置不同分辨率的樣式。
使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。@media 查詢的語法：
@media mediatype and|not|only (media feature) { CSS-Code; }
例：
/* 設置了瀏覽器寬度小于1600px時的樣式 */ @media screen and (max-width: 1600px) { .select2-container{ width:328px !important; } #address{ width:calc(37% - 3px) !important; } } /* 設置了瀏覽器寬度小于1367px時的樣式 */ @media screen and (max-width: 1367px) { .select2-container{ width:275px !important; } #address{ width:calc(36% + 3px) !important; } }
可以看出：@media 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面，@media 是非常有用的。當你重置瀏覽器大小的過程中，頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面。
實例：
DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>無標題文檔</title> <style> .abc { height: 300px; border: 1px solid #000; margin: 0 auto } //可以去掉邊框 @media screen and (min-width: 1201px) { .abc { width: 1200px } } /* css 注釋說明：設置了瀏覽器寬度不小于1201px時 abc 顯示1200px寬度 */ @media screen and (max-width: 1200px) { .abc { width: 900px } } /* 設置了瀏覽器寬度不大于1200px時 abc 顯示900px寬度 */ @media screen and (max-width: 900px) { .abc { width: 200px; } } /* 設置了瀏覽器寬度不大于900px時 abc 顯示200px寬度 */ @media screen and (max-width: 500px) { .abc { width: 100px; } } /* 設置了瀏覽器寬度不大于500px時 abc 顯示100px寬度 */ </style> <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> </head> <body> <div class="abc">DIVCSS5實例：我這個DIV寬度會隨瀏覽器寬度變化哦，試試改變?yōu)g覽器寬度</div> </body> </html>
（學習視頻分享：css視頻教程）
