使用媒體查詢來定位不同的螢幕大小

通常，響應式 Web 設計涉及媒體查詢，這些 CSS 塊僅在滿足條件時執行。這對於響應式網頁設計非常有用，因為你可以使用媒體查詢為網站的移動版本與桌面版本指定不同的 CSS 樣式。

@media only screen and (min-width: 300px) and (max-width: 767px) {
    .site-title {
        font-size: 80%;
    }

    /* Styles in this block are only applied if the screen size is atleast 300px wide, but no more than 767px */
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .site-title {
        font-size: 90%;
    }

    /* Styles in this block are only applied if the screen size is atleast 768px wide, but no more than 1023px */
}

@media only screen and (min-width: 1024px) {
    .site-title {
        font-size: 120%;
    }

    /* Styles in this block are only applied if the screen size is over 1024px wide. */
}