Question

我有一个css字体大小的问题，我无法弄清楚。

问题：

带页脚的简单网站。页脚由两列组成，每列都有一些链接。这些列基于display：inline-block。

font-size在rem中设置，在Desktop上运行正常。但是在移动设备上，即Android Chrome，字体大小不会缩放：文本变得难以辨认，其他文本（即p标签）可以按预期读取。

如果我从footer-nav-column中删除Display：inline-block，则文本会按预期进行缩放，但会丢失列布局。

我也尝试浮动列，但文本也缩放到微小的象形文字。

这里有什么问题？ Plz帮助; - ）

HTML：

<footer class="footer-nav">
<div class="layout-center">
    <ul class="footer-nav-column">
        <li><a href="/Contact">Contact</a></li>
    </ul>
    <ul class="footer-nav-column">
        <li><a href="/Legal">Legal</a></li>
        <li><a href="/Privacy">Privacy</a></li>
        <li><a href="/Cookies">Cookies</a></li>
    </ul>
</div>
</footer>

CSS：

    footer
{
    padding: 1rem 0;
    display: block;
}


.footer-nav
{
    padding: 2rem 0;
    background-color: #069;
}

.footer-nav-column
{
    vertical-align: top;
    display: inline-block;
    margin-right: 5rem;
}

.footer-nav-column > li
{ 
    font-size: .9rem;
    padding: .5rem 0;
}

.footer-nav-column > li > a
{
    color: #efefef !important;
}

.footer-nav-column > li > a:hover 
{ 
    text-decoration: underline;
}

桌面：

http://imgur.com/51WFQsk,vucViOd#0

移动：

http://imgur.com/51WFQsk,vucViOd#1

谢谢，你真棒！

修改

以下是完整网站： nukura.com

Answer 1

我注意到你在代码中使用了text-size-adjust。如何将html标签的font-size设置为100％（约为16px）并使所有的rem测量值相应缩放？此外，它可能有助于使用此标记：

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

将它放在头部标签中，看看它是否有帮助。我知道我在过去的项目中遇到了字体大小问题和缩放问题，比如你的问题，但是视口元标记和设置html字体大小帮助了我。

此外，尝试将div.layout-center设置为100％宽度并删除最小宽度，以使其适合您的蓝框。

带显示的font-size：内联块失败

1 个答案: