Search code examples
cssgoogle-chromeinternet-explorermedia-queries

CSS media queries - when is a px not a pixel?

I am working on CSS that switches between layouts for desktop, tablet and phone at various breakpoints expressed as window widths in pixels

@media screen and (min-width: 350px) and (max-width: 700px) { ... } 
@media screen and (min-width: 701px) and (max-width: 1000px) { ... }
@media screen and (min-width: 1001px) { ... }

I noticed that if I re-size a window until the CSS is on the cusp of changing from "desktop" to "tablet", which should happen at 1000 pixels, IE and Chrome have different ideas about how wide that is

enter image description here

/* ===== 1. Styling common to all sized devices ===== */

body { 
  font-family: Arial, Helvetica, sans-serif; 
  background: grey;
}

#page {
  background: lightgrey;
}

#header, #navigation, #main, #footer {
  background: white;
  padding: 0.7em;
}
#navigation, #main, #footer {
  margin-top: 1.5em;
}
#navigation, #main {
  margin-bottom: 1.5em; /* push footer away */
}

#header { 
  color: red;
  font-size: 3em; 
  font-weight: bold; 
}

#navigation ul {
  list-style: none;
  padding-left: 0;
}

#main td:first-child {
  white-space: nowrap;
  font-weight: bold;
  text-align: right;
}
#main td {
  padding: 0 0.5em 0.2em 0;
  vertical-align: top;
}

#footer {
  text-align: right;
}

/* ====== 2. Styling for phones ======= */
@media screen and (min-width: 350px) and (max-width: 700px) {
  #header { color: orange; }
  #navigation ul { margin: 1em; }
  #navigation li { display: inline; margin-right: 1.2em; } 
}
/* ====== 3. Styling for tablets ====== */
@media screen and (min-width: 701px) and (max-width: 1000px) {
  #header     { color: blue; }
  #main       { width: 80%; float: right; }
  #navigation {             float: left; }
  #footer     { clear:both; }
}
/* ====== 4. Styling for desktops ====== */
@media screen and (min-width: 1001px) {
  #header { color: green; }
  #page {
    width: 55em;
    margin: 2em auto;
  }
  #main {
    float: right;
    width: 74%;
  }
  #navigation {
    float: left;
    width: 18%; 
  }
  #footer { clear:both; }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>layout & font-size tests</title>
    <link rel="stylesheet" href="main.css" /> 
  </head>
  <body>
    <div id="page">
  
      <div id="header">
        Site Name
      </div>

      <div id="main">
        <h1>Welcome to Site Name!</h1>
        <h2>Diary</h2>
        <table class="calendar">
          <tr><td>Jun 18 2015</td><td>18:30</td>
              <td>Lorem ipsum dolor sit amet</td></tr>
          <tr><td>Jul 01 2015</td><td>09:00</td>
              <td>consectetur adipisicing elit</td></tr>
          <tr><td>Aug 09 2015</td><td>18:00</td>
              <td>sed do eiusmod tempor incididunt ut labore et dolore 
                  magna aliqua. Ut enim ad minim veniam, quis nostrud   
                  exercitation exercitation ullamco laboris nisi ut aliquip</td></tr>
        </table>
        <h2>Lorem ipsum</h2>
        <p>
          dolor sit amet,  consectetur adipisicing      
          elit, sed do eiusmod tempor incididunt ut labore et dolore 
          magna aliqua. Ut enim ad minim veniam, quis nostrud   
          exercitation exercitation ullamco laboris nisi ut aliquip 
          ex ea commodo consequat. Duis aute irure dolor  
          in reprehenderit in voluptate velit esse cillium dolore 
          eu fugiat nulla pariatur.
        </p>
        <h2>Lorem ipsum</h2>
        <p>
          dolor sit amet,  consectetur adipisicing      
          elit, sed do eiusmod tempor incididunt ut labore et dolore 
          magna aliqua. Ut enim ad minim veniam, quis nostrud   
          exercitation exercitation ullamco laboris nisi ut aliquip 
          ex ea commodo consequat. Duis aute irure dolor  
          in reprehenderit in voluptate velit esse cillium dolore 
          eu fugiat nulla pariatur.
        </p>
      </div> <!-- #content -->

      <div id="navigation">
        <ul>
          <li>Here</li>
          <li>There</li>
          <li>Somewhere</li>
          <li>Elsewhere</li>
          <li>Hither</li>
          <li>Thither</li>
          <li>Yon</li>
          <li>Beyond</li>
        </ul>
      </div>

      <div id="footer">
         &copy; Copyright RGB 2015
      </div>

    </div> <!-- #page -->

  </body>
</html>

Why is 1000px wider in IE than in Chrome?

Solution

  • I just tried your code in both Chrome (latest) and IE (11), and it works as it should be work. It breaks exactly at 1000px and 700px. Is your browser zoom on default? It is maybe a lame question, but it could be confusing, when your zoom is not the same in both browsers.