ビューポート連動calc()＋メディアクエリーのデモ

ビューポート幅375～1280pxの間では、H1要素のフォントサイズが20～30pxの間で変化します。
ボックスの幅を操作して効果をご確認ください。

メディアクエリー上書きタイプ

CSS

/* 全体に有効 */
h1 {
    font-family: 'Verdana', sans-serif;
    font-size: 20px;
}

/* ビューポート幅 376px 以上に有効 */
@media (min-width: 376px) {
    h1 {
        font-size: calc((100vw - 375px) * 10 / 905 + 20px);
    }
}

/* ビューポート幅 1280px 以上に有効 */
@media (min-width: 1280px) {
    h1 {
        font-size: 30px;
    }
}

メディアクエリー分割タイプ

CSS

/* 全体に有効 */
h1 {
    font-family: 'Verdana', sans-serif;
}

/* ビューポート幅 375px 以下に有効 */
@media (max-width: 375px) {
    h1 {
        font-size: 20px;
    }
}

/* ビューポート幅 376px 以上 1279px 以下に有効 */
@media (min-width: 376px) and (max-width: 1279px) {
    h1 {
        font-size: calc((100vw - 375px) * 10 / 905 + 20px);
    }
}

/* ビューポート幅 1280px 以上に有効 */
@media (min-width: 1280px) {
    h1 {
        font-size: 30px;
    }
}

Media Queries Level4: Range Syntax

CSS

/* 全体に有効 */
h1 {
    font-family: 'Verdana', sans-serif;
}

/* ビューポート幅 375px 以下に有効 */
@media (width <= 375px) {
    h1 {
        font-size: 20px;
    }
}

/* ビューポート幅 375px 超～ 1280px 未満に有効 */
@media (375px < width < 1280px) {
    h1 {
        font-size: calc((100vw - 375px) * 10 / 905 + 20px);
    }
}

/* ビューポート幅 1280px 以上に有効 */
@media (1280px <= width ) {
    h1 {
        font-size: 30px;
    }
}