移动时标识大小

Question

我附上了一张图片，以帮助解释我想要完成的任务。我希望我的徽标在移动设备上显示时与图像类似。不确定是否是某些填充导致它位于菜单选项卡上方而不是水平。

网站地址为https://chris-schilling-jksc.squarespace.com/

密码是fsj

Answer 1

仅显示水平。但我的感觉是，你设置了height。如果删除该样式，可能会有所帮助。

#header #logoWrapper, #header #logoImage {
  width: 350px;
  height: auto;
}

如果它适用于桌面，最好将其与移动设备的@media查询相结合。

@media screen and (max-width:640px) {
    #header #logoWrapper, #header #logoImage {
      width: 350px;
      height: auto;
    }
}
@media screen and (max-device-width:640px) {
    #header #logoWrapper, #header #logoImage {
      width: 350px;
      height: auto;
    }
}

Answer 2

将徽标的高度设置为auto而不是85px。

#header #logoWrapper, #header #logoImage {
  width: 350px;
  height: auto;
}

Answer 3

添加此css：

@media screen and (max-width:640px) {
    #header #logoWrapper, #header #logoImage{
        height: auto;
    }
}

问题是正在定义高度导致它看起来很大。

Answer 4

您为#header #logoWrapper, #header #logoImage设置了一个高度 - 将其保留为自动，并且元素将根据其display: inline-block vertical-align: middle

进行对齐

我刚用开发工具检查过它。

Answer 5

试试这个。

@media (max-width:640px){

  #logoImage a {
    margin-top:20px;
  }

}

注意：请勿将徽标放大，因为iPhone的宽度为320px。如果您增加徽标的大小，那么该菜单图标将在移动设备上消失。