css - 如何将标题样式设置为在许多设备上保持一致的大小？

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/

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

此处的 header 太小而无法使用。我看到其他网站的 header 具有恒定高度，可以很好地转换为我的移动浏览器，这是如何实现的？为什么我的放大这么远？

Answer 1

有两种选择。

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

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