Question

所以我有这个html页面：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div class="container">
        <div class="col-lg-12">
            <div>
                <h1 class="text">Hello</h1>
                <h1 class="text">Welcome</h1>
            </div>
        </div>
    </div>
</body>
</html>

这个CSS：

.text{
    margin-top: 50px;
    text-transform: uppercase;
    text-align: center;
    font-family: Arial;
    font-size: 120px;
}

问题在于移动设备中初始比例设置为1的移动设备中的字体大小在移动设备中太大而在我没有设置初始比例时太小。

PC：http://cl.ly/image/3S3u1V3N3G40/hello.jpg

初始比例为1的移动设备：http://cl.ly/image/2W0N142o1f16/IMG_1020.PNG （文字太大了）

没有初始比例的移动设备= 1：http://f.cl.ly/items/2s0O3x122R2b0o1F2P3Q/IMG_1021.PNG （文字太小）

问题是：如何在电脑和移动设备中以一种快速响应的方式使文字大小看起来很好？

Answer 1

元视口的

Googles recommendation是使用initial-scale=1

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

尝试移动优先方法。首先开始为较小的视口开发，并在视口变宽时使用媒体查询进行调整。

通常，对于字体大小，使用em而不是px被视为最佳做法。

所以你可以选择这样的东西：

.text {
  margin-top: 50px;
  text-transform: uppercase;
  text-align: center;
  font-family: Arial;
  font-size: 1em;
}

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

@media (min-width: 1100px) {
  .text {
    font-size: 1.2em;
  }
}

@media (min-width: 2200px) {
  .text {
    font-size: 1.4em;
  }
}

Answer 2

离开initial-scale=1并在CSS文件中添加媒体查询，如下例所示（这是iPhone的媒体查询，因为您的屏幕是从iPhone 5 / 5s拍摄的）

@media only screen and (min-device-width: 560px) and (max-device-width: 1136px) {


.text {
    /* Adjust font-size to your preferences */
    font-size: 30px;
    }
}

Answer 3

在body标签中将您的初始字体大小设置为14px，然后使用EM进行上述不同的媒体查询，即字体大小：1.1em，1.4em等。我很惊讶标题标签使用px代替他们的使用em设置基本字体大小和缩放似乎要容易得多。

Answer 4

以下是我从Fabian的例子中收集到的问题的解决方案。当我在移动设备上时，我需要立即调用按钮文本以文本大小下拉，因此我将其修改如下：

我的示例中的类是“callNow”，并删除了类的不相关属性。一旦低于400px，文本大小就会减小。

.callNow {
}

@media (max-width: 400px) {
  .callNow {
    font-size: .5em;
  }
}

@media (min-width: 401) {
  .callNow {
    font-size: 1em;
  }
}

移动设备

4 个答案: