Html 手机上未应用CSS字体大小

我有以下代码：

html

<div class="footer">

    <div class="terms">
        <a href="terms.html" class="footer-text">Terms of Service</a>
    </div>

    <div class="contact">
        <a href="mailto:admin@thewhozoo.com?Subject=theWhoZoo%20query" target="_top" class="footer-text"><img class="email-icon" alt="Email" src="images/icon_email.png">admin@thewhozoo.com</a>
    </div>

</div>

当我在mac或pc上的浏览器中运行此功能时，它工作正常，即字体大小正确。但是，在手机的Chrome中，字体为100%，即85%的字体不适用

---

如果有人能建议我应该如何构造代码，我将不胜感激。

您可以尝试这样的方法

.footer-text {
    font-size: 1vw;
}
// you can try either,
.footer-text {
    font-size: 2em;
}

1vw=视口宽度的1%

1vh=视口高度的1%

1vmin=1vw或1vh，以较小者为准

---

1vmax=1vw或1vh，以较大者为准。对于这种情况，您可以尝试引导。 对于许多特性，还可以使用引导CSS和JQuery

试着这样做：

 @media (min-width: 400px)
    {
        .footer-text 
        {
            font-size: 40px;
        }
    }

    @media (min-width: 500px)
    {
        .footer-text 
        {
            font-size: 80px;
        }
    }

    @media (min-width: 600px)
    {
        .footer-text 
        {
            font-size: 100px;
        }
    }

---

如果将该行放在头文件中，则响应解决方案存在问题

<meta name="viewport" content="width=device-width, initial-scale=1.0">

---

之后，通过媒体查询使其响应

您是如何定义全局字体大小的？比如说你有某种主体{font size 16px；}吗？另外，你使用像素作为字体大小还是em？我建议使用em，因为它是可伸缩的。嗨，鲁本，我没有定义全局

字体大小
。我把它改为
字体大小：1em
，在桌面浏览器上看起来不错，但在移动浏览器上仍然太大。（见www.thewhozoo.com）试试大众。这就是我过去常做的事。它会相应地调整字体大小
<meta name="viewport" content="width=device-width, initial-scale=1.0">