如何使用CSS使标头粘性

时间:2017-02-06 05:59:13

标签: html css

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

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

CSS

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

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

});

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

3 个答案:

答案 0 :(得分:0)

试试这个:

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

enter image description here

答案 1 :(得分:0)

  

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

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

答案 2 :(得分:0)

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

您可以使用以下代码:

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