css 移动端 标题栏

在移动设备中，为了更好的用户体验，我们需要特别注意页面的设计和布局。其中，标题栏是我们设计中的重点之一。在CSS中，有几个非常常见的技巧能够帮助我们设计出更加美观且符合移动端特点的标题栏。

首先，我们需要为标题栏设置固定高度，并将内容向下移动一个高度的距离：

header {
  height: 50px;
}
header h1 {
  margin-top: 50px;
}

通过这种方法，我们能够将标题栏“固定”在页面顶部，并为下面的内容预留出空间。当然，如果我们希望标题栏可以在用户滚动页面时始终保持可见，我们可以使用CSS的固定定位（position: fixed）来实现：

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
}

这样，无论用户怎样滚动页面，标题栏都会始终保持在页面顶部。

接下来，我们需要考虑标题栏的背景颜色和文本颜色。在移动设备中，尽量使用简单、清晰的颜色，以便于用户的识别和阅读。同时，我们还需要在不同的状态下为标题栏设置不同的颜色，例如活动状态、正常状态、固定状态等等。

header.active {
  background-color: #007aff;
  color: #fff;
}
header.normal {
  background-color: #f2f2f2;
  color: #333;
}

最后，我们还可以通过CSS的渐变效果为标题栏增加更加生动和立体的感觉，例如利用线性渐变和径向渐变：

header {
  background: linear-gradient(to bottom,#fff,#ccc);
}
header {
  background: radial-gradient(circle,#ccc);
}

通过这些CSS技巧，我们能够轻松地为移动端设计出美观且富有交互性的标题栏。同时，这些技巧也可以通过适当地修改应用到其他的页面组件和布局中。