css - 字体大小在移动设备上继承控制

Question

我正在管理一个新网站，但我遇到了字体大小问题。在桌面版本上它看起来不错，但在移动设备上文本太大了。

.blog {

        h2 {
            a {
                font-size:inherit;
                font-weight:inherit;
                color:inherit;
            }
        }

如何控制移动设备上的字体？我能以某种方式添加类似的内容吗:

@media screen and (max-width: 768px){

        .h1, h1 {
            font-size: 1.5em;
        }
        .h2, h2 {
        font-size: 26px;
        }

或者这是错误的方法吗？

有了这个解决方案，代码会是什么样子？:

.blog {

        h2 {
            a {
                font-size:inherit;
                font-weight:inherit;
                color:inherit;
            }


        @media screen and (max-width: 768px){

        .h1, h1 {
            font-size: 16px;
        }
        .h2, h2 {
        font-size: 12px;
        }
}

Answer 1

正确的使用方法。

但是这里有一些提示:

Prefear using px over em

因为 em 和 ex 的解释取决于操作系统。 px 将显示相同的大小，无论您使用什么操作系统。

You can use relative values : %

% 将使字体大小与其父字体大小成比例。这对于响应式设计非常有用，因此您将只更改一种字体大小，父级。

您可以使用 this link有关使用什么单位和原因的更多信息。

编辑:

您的代码需要一些更正:您的 CSS 遗漏了一些 所以我修复了它并且能够使您的代码工作。

.blog {

    h2 {
        a {
            font-size:inherit;
            font-weight:inherit;
            color:inherit;
            }
        }


    @media screen and (max-width: 768px){

    .h1, h1 {
        font-size: 16px;
        }
    .h2, h2 {
        font-size: 12px;
        }
    }
}

JSFiddle here