如何使用CSS使标头粘性

Question

我想在我的网站上制作一个粘性标题。我正在尝试使用CSS，但是当我使用下面的CSS时，我的徽标在移动设备上查看时会缩小。

网站的网址：http://gomodemo.se/port73/

CSS

@media only screen and (max-width: 768px){

    header{
        position: fixed !important;
        top: 0px;
    }

});

我在桌面上没有任何问题，但在移动设备上，徽标会缩小。当我点击移动设备中的汉堡菜单时，徽标会缩小。不仅标识我的标题部分缩小了。请帮我解决这个问题。谢谢

Answer 1

试试这个：

.logo img {
    height: 88px;
    width: 72%;
}

Answer 2

  

在设置徽标样式时，请务必使用百分比而不是像素。

使用像素时，您将根据分辨率设置徽标的位置和大小 - 从不同的分辨率（因为您的移动设备可能具有更高的分辨率）使其看起来变焦。如果分辨率较高的人查看您的网站，则由于分辨率上的其他像素，您有一个未覆盖的区域。

Answer 3

我建议你在百分比中使用高度值。 除非你没有其他选择，否则不要使用重要的东西。

您可以使用以下代码：

@media screen and (min-device-width: 768px) and (max-device-width: 1200px) { 
.logo img {
    margin-top: -10%;
    max-height: 50%;
     }
}