CSS3中的Media范围是一种非常强大的工具，它允许我们根据设备的屏幕尺寸和方向、打印样式和其他一些参数来定义样式规则。

要使用Media范围，我们需要遵循一些规定。首先，我们使用@media规则来定义媒体查询，例如：

@media screen and (min-width: 768px) {
/* 样式规则 */
}

在上面的示例中，我们使用@media规则来定义一个针对大于等于768像素宽度的屏幕的样式规则。

我们可以基于设备的不同属性来定义Media范围。例如，我们可以使用min-width和max-width属性来定义屏幕宽度，例如：

/* 大于等于768像素宽 */
@media screen and (min-width: 768px) {
/* 样式规则 */
}
/* 大于等于1024像素宽 */
@media screen and (min-width: 1024px) {
/* 样式规则 */
}
/* 小于等于768像素宽 */
@media screen and (max-width: 768px) {
/* 样式规则 */
}

除了屏幕宽度之外，我们还可以基于其他一些属性来定义Media范围，例如方向、分辨率和打印样式等。以下是一些示例：

/* 竖屏方向 */
@media screen and (orientation: portrait) {
/* 样式规则 */
}
/* 横屏方向 */
@media screen and (orientation: landscape) {
/* 样式规则 */
}
/* 高分辨率设备 */
@media only screen and (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
/* 样式规则 */
}
/* 打印样式 */
@media print {
/* 样式规则 */
}

Media范围也可以嵌套使用，以针对多个设备属性进行定义。例如：

/* iPad方向为横屏，宽度大于等于768像素 */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
/* 样式规则 */
}

在设计响应式网站时，Media范围是一个非常有用的工具。使用Media范围可以帮助我们根据设备的属性来达到更好的可访问性和用户体验。