CSS 媒体查询 - 什么时候 px 不是像素？

Question

我正在研究 CSS，它可以在桌面、平板电脑和 phone 的不同断点之间切换布局，这些断点表示为 window 宽度（以像素为单位）

@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) { ... }

我注意到，如果我重新调整 window 的大小，直到 CSS 即将从 "desktop" 变为 "tablet"，这应该发生在 1000 pixels, IE 和 Chrome 对它的宽度有不同的看法

/* ===== 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>

为什么 IE 比 Chrome 宽 1000px？

Answer 1

我刚刚在 Chrome（最新）和 IE (11) 中尝试了您的代码，它可以正常工作。它恰好在 1000 像素和 700 像素处中断。您的浏览器是否默认缩放？这可能是一个蹩脚的问题，但当你的缩放比例在两个浏览器中不一样时，它可能会令人困惑。

CSS 媒体查询 - 什么时候 px 不是像素？

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

css

google-chrome

internet-explorer

media-queries