title: How does a CSS width react to different screens?
body: <p>When I use</p>
  
  <pre><code>.class { width: 800px; }
  </code></pre>
  
  <p>what does it actually mean?</p>
  
  <p>When I view it on my laptop screen, it shows up exactly 800 pixels wide. When I view it on my tablet screen, it shows up as 1600 pixels wide. I am guessing because my tablet might have a higher pixel density. However, the physical (when compare side-by-side) width of the element if much smaller on the tablet than on my laptop</p>
  
  <p>So, my question is: When I define a dimension in CSS to an HTML element, what is the reference? How is it computed or scaled on different displays?</p>