css - 字体大小继承了对移动设备的控制

我正在管理一个新站点，该站点的字体大小有问题。在台式机版本上看起来不错，但在移动设备上，文本变大了。

.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;
        }
}

最佳答案

这是使用它的正确方法。

但是，这里有一些提示：


  在px上使用px进行预恐惧


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


  您可以使用相对值：％


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

您可以使用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

关于css - 字体大小继承了对移动设备的控制，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38868566/