For more information, you can check out the code here: http://codepen.io/anon/pen/VvdyQb?editors=010
I'm struggling to comprehend how the viewport width changes when zooming in or out. My media queries are activated based on changes in width measured in em units.
My query is this: Why does the viewport adjust when I zoom? Is it related to the increase or decrease in font size? The 'em' unit is linked to the font size of the parent container. If the default font size for the body element is 16px, then 1em equals 16 pixels. But what happens during zooming? Does 1em no longer equal 16px and instead becomes larger or smaller depending on the level of zoom? I presume that text size affects the parent container's size, but I find it challenging to understand how it impacts the overall width of the page. How is width connected to zooming and em? It seems like the page width decreases upon zooming in and expands when zoomed out?
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) and (max-width: 99em) {
#logo {
background: orange;
font-size: 0px;
}
}
@media (min-width: 100em) and (max-width: 149em) {
#logo {
display: none;
}
}
@media (min-width: 150em) {
#logo {
display: initial;
}<div id="nav">
<div id="logo">TEST</div>
</div>