html - 浏览器或移动设备无法识别媒体查询

Question

我正在尝试创建响应式布局，但出于某种原因，当我将相关 CSS 包装在媒体查询中时，无法识别它:即，如果我调整浏览器窗口大小或在 iPhone 上查看它，不应用 CSS。我不确定我在这里做错了什么。这是相关代码(请注意，我正在使用 WordPress 中的类型插件，因此所有括号内的内容):

HTML

<div class="client-stats">
  <h3>Stats</h3>
  <p><strong>Event Date:</strong> [types field="date-of-event" style="text" format="F j, Y"][/types] </p>
  <p><strong>Event Type:</strong> [types field="event-type"][/types]</p>
  <p><strong>Special Effects:</strong> [types field="special-effects"][/types]
  <p><strong>Equipment Used:</strong> [types field="equipment-used"][/types]</p>
</div>

<div class="client-description">    
    <div class="portfolio-description">
    [wpv-post-body view_template='None']
    </div>    
</div>

CSS

.client-stats {
  width: 325px;
  float: left;
  margin-right: 15px;
  padding: 0 7px 0 35px;
  background-color: #333;
  background-image: url('/wp-content/uploads/2016/05/paper-1.jpg');
  min-height: 350px;
  line-height: 1.5;
  color: #fff;
}

.client-stats p, strong, h3 {
    font-family: "Courier New",monospace;
}

.client-stats h3 {
  text-transform: uppercase;
  margin-bottom: 20px;
  color: #fff;
}

.client-stats strong {
  text-decoration: underline;
  font-family: "Courier New",monospace;
}

.client-description {
  margin-left: 350px;
}

@media only screen and (max-width: 768) { 
  .client-stats {
    width: 100%;
    float: none;
    margin-right: 0;
  }

  .client-description {
    width: 100%;
    margin-left:0;
  } 
}

如果我删除媒体查询换行，CSS 应用良好(所以这不是 CSS 规则，特别是问题所在)。

相关页面在这里，如果有帮助的话:http://107.170.41.117/client/client-6/

Answer 1

@media only screen and (max-width: 768) {

CSS 长度需要单位。 768 不是有效宽度。

如果你有 used a validator 就会被拾取.