css 写一个 小程序首页 标题的样式 文字居中 小城名称 黑土优品坊 包括字体 还有内外编剧 和机型都帮我考虑一下

小程序首页标题栏的样式设计需要考虑品牌识别度、用户界面的一致性以及不同设备的适配性。以下是为“黑土优品坊”小程序首页设计标题栏样式的CSS代码示例。

/* 小程序首页标题栏样式 */
.page-title {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px; /* 根据实际设计调整 */
  background-color: #ffffff; /* 背景颜色 */
  color: #000000; /* 字体颜色 */
  font-size: 18px; /* 字体大小 */
  font-weight: bold; /* 字体加粗 */
  text-align: center; /* 文字居中 */
  line-height: 1.2; /* 行高 */
  padding: 0 10px; /* 内边距 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 外阴影 */
}

/* 适配不同机型 */
@media (max-width: 320px) {
  .page-title {
    font-size: 16px; /* 小屏设备字体大小 */
  }
}

@media (min-width: 321px) and (max-width: 375px) {
  .page-title {
    font-size: 17px; /* 中等屏设备字体大小 */
  }
}

@media (min-width: 376px) {
  .page-title {
    font-size: 18px; /* 大屏设备字体大小 */
  }
}

样式设计说明

• 字体居中：使用text-align: center;确保文字在标题栏中居中显示。
• 字体和内外边距：设置font-size和padding来调整字体大小和内边距，以适应不同屏幕尺寸。
• 机型适配：使用@media查询来为不同宽度的设备提供不同的样式，确保在各种设备上都能良好显示。
• 背景和阴影：设置background-color和box-shadow来增加视觉层次感，提升用户体验。

请根据实际的设计需求和品牌风格调整上述样式。10