CSS已加载但未在显示上生效

Question

我总是卡在 CSS 上。我有一张桌子，可以在大屏幕上完美运行，而对于移动设备，我希望桌子采用卡片格式。我想到了创建另一个 div 并为移动设备制作 UI。并且使用 CSS，我尝试过......

resp.css

.immobile{
  display: none;
}
.immonitor{
  display: block;
 }


@media screen and (max-width: 764px){
.immonitor{
    display: none;
}
.immobile{
    display: block;
  }
}

List.html

<tbody>
                            {% for order in order_list %}

                        <div class="immonitor">
                            <tr>
                                <td>{{ order.id }}</td>
                                <td>{{order.client_name}}</td>
                                <td>{{order.event_name}}</td>
                                <td>{{order.event_date}}</td>
                                <td>{{order.location}}</td>
                                <td><a href="{% url 'order_detail' order.id %}">View</a></td>
                            </tr>
                        </div>
                            <div class="immobile">
                                <tr>
                                    <td>
                                        <div>
                                            {{order.client_name}} <br>
                                            <h3>{{ order.id }}</h3>
                                        </div>
                                        <div class="pull-right">
                                            {{order.event_name}}<br>
                                            {{order.event_date}}<br>
                                            {{order.location}}<br>
                                        </div>
                                    </td>
                                </tr>
                            </div>

                            {% endfor %}
                        </tbody>

现在，CSS 对表格没有任何影响，它同时显示卡片和表格。并且 CSS 已完美加载。

Answer 1

大多数人都会犯这个错误，我想你也犯了。是否放置了视口元标记？

<meta name="viewport" content="width=device-width, initial-scale=1.0">

需要此代码才能使媒体查询正常工作。 再次修复此代码如下：

@media only screen and (max-width: 764px){
.immonitor{
    display: none;
}

您没有在屏幕前添加only。

希望这会有所帮助！