为了创建响应式设计（并且广泛支持浏览器），我们最常检测到的功能是视口宽度，如果视口大于或小于某个宽度（或确切的宽度），则可以使用`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; } } ~~~