在响应式网站设计中，媒体查询通常用于根据不同的屏幕尺寸应用不同的样式规则。以下是一些常见的屏幕尺寸范围，这些范围可以用于定义大屏幕、中屏幕、小屏幕和超小屏幕设备的样式。这些范围广泛参考了 Bootstrap 框架的断点，因为它是一个广泛使用的前端框架，其断点设置对于多种设备都有很好的适应性。

媒体查询的屏幕尺寸范围

1.超小屏幕(Extra small devices)-手机:小于 576px。

@media(max-width: 575.98px){/*样式*/}

2.小屏幕(Small devices)较小的平板或大屏手机:从576px到767px。

@media(min-width:576px)and(max-width:767.98px){/*样式 */}

3.中屏幕(Medium devices))-平板:从768px到 991px。

@media(min-width:768px)and(max-width:991.98px){/*样式*/}

4.大屏幕(Large devices)桌面显示器:从 992px 到 1199px。

@media(min-width: 992px)and(max-width: 1199.98px){/*样式*/}

1. 超大屏幕(Extra large devices)-大型桌面显示器:大于等于 1200px。

@media(min-width:1200px){/*样式 */}