为什么@media only screen and (min-width: 768px) 也适用于屏幕宽度小于768px

Question

The css for min-width 768 is not working properly in mobile. But same css is working properly in inpect mode for width less than 768 in chrome desktop browser.

@media only screen and (min-width: 768px){
#main {
    max-width: 75%;
    float: left;
}
}

But when I switch to mobile mode in inspect tool it's again not working properly.

I am trying to edit the blogger classic theme. link of the blog https://egadgetdeals.blogspot.com/2019/11/what-youll-build-in-part-1.html?m=1

Answer 1

The meta tag viewport to avoid zoom is missing, add this into the head tag:

<meta name="viewport" content="width=device-width, initial-scale=1">