Question

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

以下是一些HTML

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

这是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总是690px宽。

＆＃13;

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;
    }
}

＆＃13;

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

＆＃13;

Answer 2

它工作正常，但也许你已经混淆了。我想你想要媒体查询中的小文件。

body {

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

}

.all {

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

}

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

http://codepen.io/paulcredmond/pen/NRmpXp

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

2 个答案: