html - 简单媒体查询不会调整 div 大小或更改 chrome 或 IE 中的字体

Question

这个非常简单的媒体查询，我已经削减了它，希望找到罪魁祸首，div 'all' 不会在 Chrome 或 IE 中调整大小。奇怪的是它在 FF 中有效。我已经尝试了实际媒体查询的每一种表述。任何帮助表示赞赏。

这是一些 HTML

<div class="all">
Adipiscing accumsan at habitasse pharetra eu a magna sollicitudin ...</div>

Here is the CSS

body {

  font-weight: bold;
  font-family: sans-serif;
  font-size: 20px;
  background: white;

}

.all {

  width: 200px;
  margin: auto;
  margin-top: 300px;
  background: blue;

}

@media only screen and (max-width: 700px) {
       .all {
        width: 690px;
        font-size: 30px;
    }
}

Answer 1

您需要从媒体查询中删除静态宽度。像我在本例中所做的那样，将其设置为 100% 或更少。按照您编写的方式，在较小的屏幕上，div 将始终为 690 像素宽。

body {

  font-weight: bold;
  font-family: sans-serif;
  font-size: 20px;
  background: white;

}

.all {

  width: 200px;
  margin: auto;
  background: blue;

}

@media only screen and (max-width: 700px) {
       .all {
        width: 100%;
        font-size: 30px;
    }
}

<div class="all">
Adipiscing accumsan at habitasse pharetra eu a magna sollicitudin ...</div>