How is the width effected when using zoom?

Code for reference: http://ift.tt/1PXDbZn

I'm having a hard time understanding how the width of the viewport changes when i zoom in/out. I have these media queries that are triggered when the width in em changes.

My questions:

1. Why exactly does the viewport change when i zoom? Does it have to do with the font-size increasing/decreasing?

2. em is used for the font-size of the parent container. If the body element defaults to 16px for font size, then 1em=16 pixels. How does this change when i zoom? How is width related to zooming and em? Similar to #1

The following is based on the code i provided:

3. For the media query at min-width:50em, changing the font size has no effect on the content of the div, why is this?

4. At min-width:100em i'm not displaying the div "logo" anymore but the container of the div "logo" named "nav" should still be view-able yet it's not as noted from the disappearance of its border shadow. Why is this?

5. At min-width:150em the div "logo" and it's parent div container reappear yet now no longer is the entire background color of the div "logo" colored but only it's content text, why is this?

html,
body {
  background-color: lightblue;
}

div#nav {
  position: relative;
  width: 50%;
  background: white;
  box-shadow: 1px 1px 15px #888888;
}

div#logo {
  border-right-style: solid;
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.15);
  font-family: 'Myriad Pro Regular';
  font-weight: normal;
  color: #1E3264;
  font-size: 2em;
}

@media (min-width:50em) {
  #logo {
    background: orange;
    font-size: 0px;
    
  }
}

@media (min-width:100em) {
  #logo {
    display: none;
   
  }
}

@media (min-width:150em) {
  #logo {
    display: initial;
  }

<div id="nav">
    <div id="logo">TEST</div>
</div>