為了創建響應式設計（并且廣泛支持瀏覽器），我們最常檢測到的功能是視口寬度，如果視口大于或小于某個寬度（或確切的寬度），則可以使用`min-width`、`max-width`以及`width`媒體功能。 ~~~css /* 如果文檔寬度小于 300 像素則修改背景顏色 */ @media screen and (max-width: 600px) { body { background-color: lightblue; } } ~~~ `orientation`媒體功能定義輸出設備中的頁面可見區域高度是否大于或等于寬度，能夠測試縱向或橫向模式。 ~~~css /* 在設備橫向放置時更改正文文本顏色 */ @media (orientation: landscape) { body { color: lightblue; } } ~~~ 使用`@media`查詢來制作相應式設計： ~~~html <p class="example">操作瀏覽器窗口，查看效果</p> ~~~ ~~~css .example { padding: 20px; color: white; } /* Extra small devices (phones, 576px and down) */ @media only screen and (max-width: 576px) { .example { background-color: red; } } /* Small devices (portrait tablets and large phones, 576px and up) */ @media only screen and (min-width: 576px) { .example { background-color: green; } } /* Medium devices (landscape tablets, 768px and up) */ @media only screen and (min-width: 768px) { .example { background-color: blue; } } /* Large devices (laptops/desktops, 992px and up) */ @media only screen and (min-width: 992px) { .example { background-color: orange; } } /* Extra large devices (large laptops and desktops, 1200px and up) */ @media only screen and (min-width: 1200px) { .example { background-color: pink; } } ~~~