title: How zoom out increase the screen width?
body: <p>I have laptop screen with resolution 1366*768 pixels , that mean screen width is 1366 pixels and height is 768 pixels , that is fixed when i set my screen resolution to 1366*768, If i have a webpage  which have css property </p>
  
  <pre><code> @media screen  and (max-width:1366px){
     //css1
   }
   @media screen and (min-width:1361px) and (max-width:1500px){
     //css2
   }
  </code></pre>
  
  <p>That mean if device 's screen has a <code>width</code> of <code>1366px</code> or lesser <code>css1</code> will apply to that page , and if the screen is larger than <code>1366px</code> then <code>css2</code> will be apply , . So for my laptop screen <code>css1</code> should be applied because it has screen width of 1366px .</p>
  
  <p>At ZOOM:100% , this works fine , But if I zoom out , <code>css2</code> starts applying , I can't understand how this can be happen , my screen width is fixed, So how Zoom out  can increase my screen width ,  . </p>
  
  <p>I become very confused , I am trying to understand this screen resolution, pixels, zoom,  for very long time now ,But can't really understand how they works ,  please help#</p>