Question

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

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

std::basic_string<T>::append

CSS长度需要单位。 @media only screen and (max-width: 768) {不是有效宽度。

如果您有used a validator，则可以使用此功能。

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

1 个答案: