Question

我正在创建一个网站并且在字体大小方面存在一些问题。我可以在电脑上看起来很好看，但在手机上字体大小变得怪异。

在手机上时，＆＃39;返回＆＃39;按钮变得非常小，段落变大了，我不能让它看起来像在电脑上一样。

HTML

<div class="Class" id="ID">
    <br><br>
    <h3><u>Title</u></h3>
    <p>Some random text</p>
    <a href="#top">Back</a>         
</div>

CSS

.Class
{
    font-size:15px;
    padding:20px;
    width:600px;
}
.Class p
{
    font-size:20px;
}
.Class a
{
    color:black;
    display:block;
    width:80px;
    margin:0;
    padding:10px;
    font-size:24px;
}
.Class a, visited
{
    color:black;
}
.Class a:hover
{
    background-color:rgb(240,240,240);
}

手机上的结果是变小，段落变大。不确定相关的是什么，我还是新手。

Answer 1

您的字体大小以像素为单位，因此它们在手机上看起来更小。这里有两个选项，可以使用媒体查询为较小的设备定义较大的像素大小，也可以使用em代替像素。

选项1示例：

.Class {
    font-size: 15px;
}

@media all and (max-width: 640px) {
    .Class {
        font-size: 18px;
    }
}

选项2示例：

.Class {
    font-size: 1.2em;
}

Answer 2

您必须使用em而不是像素。我不知道em意味着什么： Em相对于font-size。所以当你有2em时，它的大小是当前字体的2倍。

所以你必须将你的CSS更改为：

    .Class
    {
        font-size: 0.938em;
    }

和

    .Class p
    {
        font-size: 1.25em;
    }

和

    .Class a
    {
        font-size: 1.5em;
    }

或者，如果您想轻松复制和粘贴：

    .Class
    {
        font-size:0.938em;
        padding:20px;
        width:600px;
    }
    .Class p
    {
        font-size:1.25em;
    }
    .Class a
    {
        color:black;
        display:block;
        width:80px;
        margin:0;
        padding:10px;
        font-size:1.5em;
    }
    .Class a, visited
    {
        color:black;
    }
    .Class a:hover
    {
        background-color:rgb(240,240,240);
    }

如果你想知道px中有多少px，你可以在这里查找： http://pxtoem.com/

字体大小问题

2 个答案: