Question

我有以下html

<!DOCTYPE html>
<html lang="en">
<head>
    <title> Lorem Ipsum </title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="css/util.css">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
    <div class="frameT">
        <div class="frameTC">
            <div class="clearfix quote">
                <p id="quote">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus arcu leo, viverra vel sodales vitae, ornare eget sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent a orci at nisi pellentesque pharetra. Vivamus in interdum ex, sed accumsan mi. Etiam auctor ante dui, vel ornare diam sollicitudin non.
                </p>
                <p id="name"> - Lorem Ipsum</p>
            </div>
        </div>
    </div>
</body>
</html>

以下CSS

html {
    font-size: 62.5%;
}

body {
    font-family: 'Open Sans', sans-serif;
}

.frameT {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.frameTC {
    display: table-cell;
    vertical-align: middle;
}

.quote {
    margin: 0 auto;
    padding: 1rem;
    max-width: 69.5rem;
    width: 65%;
}

#quote {
    float: left;

    font-size: 1.8rem;
    font-weight: 600;
    line-height: 2.2rem;
    color: #777;
}

#name {
    float: right;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 3.2rem;
    color: #2ac;
}

在桌面上看起来很好，底部文字应该是它的大小。但在移动设备上，底部段很小。起初我有一段时间，但似乎并没有引起它。使用开发人员工具检查移动设备上的段落时，css是正常的，但视觉效果不是。

编辑：以下是我在移动设备上查看的内容http://puu.sh/mpTsJ/927670b8e7.jpg

EDIT2：发现它与段落中的文本数量有关。看起来大约140个字符，即使真实的字体大小没有变化，文字也会在移动设备上变大。

Answer 1

编辑：通过添加viewport meta tag来解决问题。

使用rem font-sizing技巧时，你需要记住在body上设置一个基本的rem值：

html {
  font-size: 62.5%;
}
body {
  font-size: 1.4rem;
}

没有它，没有样式的文本会显得更小。

查看snook的指南以获取更多信息： http://snook.ca/archives/html_and_css/font-size-with-rem

不一致段落文本化

1 个答案: