时间戳

首页 > 解决方案 > CSS固定菜单标题和按钮重叠 - 移动视图

javascript - CSS固定菜单标题和按钮重叠 - 移动视图

问题描述

我在移动视图中与我的标题标题重叠的按钮有问题（在计算机视图中看起来很好）。我试图找到一种方法让按钮和标题标题都适合标题，可能通过根据宽度变化调整大小？如果可能的话。

这是我的标题的 CSS：

    header: {
        background: '#C4C4C4',
        height: '100px',
        textAlign: 'center',
        boxShadow: '0px 2px 2px #A9A9A9',
        fontFamily: 'PT Sans Caption',
        fontSize: '36px',
        marginBottom: '20px',
        paddingTop: '20px',
        textTransform: 'uppercase',
        position: 'fixed',
        top: 0,
        width: '100%',
    },
    homeButton: {
        boxShadow: '0px 2px 2px #A9A9A9',
        fontFamily: 'PT Sans Caption',
        fontSize: '20px',
        display: 'block',
        position: 'absolute',
        marginLeft: '10px',
    },

这是电脑视图的截图： 在此处输入图像描述 这是手机视图的截图： 在此处输入图像描述

基本上我希望“添加运动”标题不会被主页按钮隐藏。任何帮助，将不胜感激！

标签： javascriptcssmobileheadertitle

解决方案

您可以尝试使用 Flexbox 和媒体查询

header {
  display: flex;
  @media (max-width: [whatever you choose]px) {
     flex-wrap: wrap;
  }

}

推荐阅读