Question

我正在开发CSS，可以在各种断点处切换桌面，平板电脑和手机的布局，表示为窗口宽度（以像素为单位）

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

我注意到，如果我重新调整窗口大小，直到CSS处于从＆＃34;桌面＆＃34;至于＃34;平板电脑＆＃34;，这应该发生在1000像素，IE和Chrome对于它的宽度有不同的想法

enter image description here

＆＃13;

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

＆＃13;

<!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>

＆＃13;

为什么IE中的1000px比Chrome更宽？

Answer 1

我刚刚在Chrome（最新）和IE（11）中尝试了您的代码，它的工作原理应该是正常的。它完全打破了1000px和700px。您的浏览器是否默认为缩放？这可能是一个蹩脚的问题，但是当两个浏览器中的缩放不同时，它可能会让人感到困惑。

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

1 个答案: