使用媒体查询来定位不同的屏幕大小

通常，响应式 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. */
}