如何在许多设备上将标题设置为一致的大小？

Question

我一直在努力为自己创建自适应网站模板，我想从头开始做。

我无法让标题始终如一。

我有我在这里写的内容：

header {
  background: #222;
  height: 60px;
  line-height: 60px;
  transition: top 0.2s linear;
  width: 100%;
  overflow: hidden;
  text-align: center;
}

.hidden-header-fixed {
  top: -60px;
  position: fixed;
}
.visible-header-fixed {
  top: 0px;
  position: fixed;
}

.visible-header-abs {
  position: absolute;
}

#logo {
  display:inline;
  font-size: 30px;
  color: #eee;
  text-transform: uppercase;
  letter-spacing: -1px;
  font-weight: bold;
  font-family: 'Lato', sans-serif;
  text-align: center;
  width: 200px;
}

#logo:hover {
  color: #aaa;
  text-decoration: none;
}

.menu-button {
  height: 40px;
  width: 40px;
  background: #eee;
  display:inline;
  float: right;
  margin: 10px;
  border-radius: 20px;
}

在上下文中：http://jsfiddle.net/7mc3oczp/

当我在手机上查看该页面时，它看起来像这样：

此标题太小，无法使用。我看到其他网站的标题有一个恒定的高度转换为我的手机浏览器，这是如何完成的？我为什么要放大这么远？

Answer 1

您是否尝试在页面中添加比例因子？

<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" >

Answer 2

有两种选择。

1. 您可以使用不同设备的媒体查询编写自己的代码，首先检查它，列出您的断点和＆amp;更改该部分的代码。这是一个非常繁琐且耗时的过程。

2. 您可以使用框架来完成。使用Twitter bootstrap更容易管理响应能力，它易于学习。检查http://getbootstrap.com，然后使用此格式修改代码。