CSS字体大小未在移动版

Question

我有以下代码：

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>

CSS

.footer-text {
    font-size: 85%;
}

当我在我的Mac或PC上的浏览器中运行它时，它运行正常，即字体大小正确。但是，在手机上的Chrome中，字体为100％，即未应用85％。

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

Answer 1

你可以尝试这样的事情，

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

1vw =视口宽度的1％

1vh =视口高度的1％

1vmin = 1vw或1vh，取较小者

1vmax = 1vw或1vh，取较大者

Answer 2

对于这种情况，您可以尝试bootstrap。 对于很多功能，也可以使用bootstrap 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;
        }
    }

Answer 3

有关于在您的标题文件中放置该行的分辨率的响应问题

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

之后

使其对媒体查询做出响应