使用媒体查询在调整大小窗口期间隐藏div

Question

I want to create a responsive template to show a custom mobile menu. When i click on an image, i use javascript to show or hide a div where there is the mobile menu. I use media queries to show this image only if the screen width is less than 768px.

CSS Code

#img_mobile{
    width: 15%;
    height: auto;   
    position: absolute;
    top: 10px;
    left: 0;
    display: none; //img is not visible for default..
}

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

    #img_mobile{
        display: block; //image is visible..
    }
}

Javascript Code:

<script type="text/javascript"> 
function hideOrShow(id){    
    if(document.getElementById(id).style.display != 'block'){
        //show..
        document.getElementById(id).style.display = 'block'
    }
    else{   
        //hide..
        document.getElementById(id).style.display = 'none'
    }   
}
</script>

//call the script on click image..
<a href="javascript:hideOrShow('menu_mobile');"><img alt="image" src="image.png"></a>

Everything works well, the image is shown only if the max-width is 768px or less and when i click on this image, my custom menu is shown or hidden. My problem is, when this menu is shown, if i resize my browser window and it become bigger than 768px, the image is hidden but the div with the menu is still visible, how can i avoid this?

I try with this in CSS:

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

    #menu_mobile{
        display: none; //try to set menu invisible, doesn't work anyway..
    }
}

//menu is set to display none for default..
#menu_mobile{
   display: none;
}

Hope i explained myself, thanks.

Answer 1

Just adding answer for future reference...

Wrap entire contents into a container that you want hidden/shown and reference that in the media query.

<div id="wrapper">
     <img src="something" />
     <ul id="menu"></ul>
</div>

As a simple example with markup then in the code you do exactly what you have but instead reference #wrapper instead of the img