在前端開發中，CSS媒體查詢是非常重要的一部分。它允許你為不同的設備或屏幕大小制定不同的CSS規則，從而幫助我們實現響應式設計。下面是一些常見的媒體查詢。

/* 用于小于等于768像素寬的設備 */
@media (max-width: 768px) {
/* CSS 規則在此 */
}
/* 用于小于等于992像素寬的設備 */
@media (max-width: 992px) {
/* CSS 規則在此 */
}
/* 用于小于等于1200像素寬的設備 */
@media (max-width: 1200px) {
/* CSS 規則在此 */
}

這些媒體查詢僅列出了一些常見的寬度值。你可以根據需要適應不同的屏幕大小和設備類型。除了max-width，你還可以使用min-width、orientation和device-aspect-ratio等屬性。例如：

/* 用于最小寬度為 768 像素的設備 */
@media (min-width: 768px) {
/* CSS 規則在此 */
}
/* 用于橫向屏幕設備 */
@media (orientation: landscape) {
/* CSS 規則在此 */
}
/* 用于設備長寬比為 16:9 */
@media (device-aspect-ratio: 16/9) {
/* CSS 規則在此 */
}

通過使用媒體查詢，我們可以輕松地為不同的屏幕大小和設備類型提供定制的用戶體驗。無論你是在設計單頁應用還是響應式電子商務網站，掌握如何運用媒體查詢是非常重要的。