Twitter bootstrap 手机中具有初始比例的字体太大_Twitter Bootstrap_Responsive Design

Twitter bootstrap 手机中具有初始比例的字体太大

twitter-bootstrap responsive-design

Twitter bootstrap 手机中具有初始比例的字体太大,twitter-bootstrap,responsive-design,Twitter Bootstrap,Responsive Design,我有一个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.cs

我有一个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>

问题是，在手机中，初始比例设置为1时，字体大小太大，而在我未设置初始比例时，字体大小太小

个人电脑：

初始比例为1的移动设备：（文本太大）

无初始刻度的移动式=1：（文本太小）

问题是：如何使文本大小在PC机和移动设备中都能以响应的方式保持良好？

离开

initial scale=1

并在CSS文件中添加媒体查询，如下面的示例所示（这是iPhone的媒体查询，因为您的屏幕取自iPhone 5/5s）

对于元视口，将使用

初始比例=1

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

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

以下是我从Fabian的示例中收集到的解决方案。当我在移动设备上时，我需要一个call now按钮文本来降低文本大小，因此我对其进行了如下修改：

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

.callNow {
}

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

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

但是bootstrap不应该自动为我这样做吗？你将字体大小设置为120像素，否则你会期望它看起来怎么样？使用em单位而不是px单位

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

.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;
  }
}

.callNow {
}

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

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