在css中，可以使用“@media”規則根據不同的螢幕尺寸，來設定不同解析度的樣式，語法“@media mediatype and|not|only (media feature){css樣式}” 。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
在css中，可以使用「@media」規則來設定不同解析度的樣式。
使用 @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 是非常有用的。當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。
實例：
DOCTYPE html>无标题文档 DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度
（學習影片分享：css影片教學）
以上是怎麼設定不同解析度的css樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
