如何使用css使标题粘

Question

I want to make a sticky header in my website. I am trying following CSS but when I use the CSS below, My logo gets zoomed out when viewed on a mobile device.

URL of the website : http://gomodemo.se/port73/

CSS

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

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

});

I do not have any issue on the desktop but on a mobile device, the logo gets zoom out.When I click on hamburger menu in the mobile device the logo gets zoom out. Not only logo my header section gets zoom out. Please help me to resolve the issue. Thank you

Answer 1

try this one:

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

Answer 2

When styling your logo, be sure to use percentage instead of pixels.

When using pixels, you are setting the position and size of your logo native to your resolution - causing it to look zoomed when viewed from a different resolution (because your mobile device might have a higher resolution). If someone who has a higher resolution views your website, there is an area which you have not covered because of the additional pixels on the resolution.

Answer 3

I advice you to use height value in Percentage. And don't use important unless you don't have another options.

You can use below code:

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