如何根据屏幕大小更改 div 内容答案

【问题标题】：How to change div content based on screen size如何根据屏幕大小更改 div 内容
【发布时间】：2021-12-31 17:28:44
【问题描述】：

当屏幕变小时，我想更改indices_container 内的行 div 的内容。目前，在所有屏幕尺寸上，每一行都显示指数名称、价格、1 天变化和年初至今的变化。我只想在小屏幕上显示索引名称和 ytd 变化。

我只使用 Flask 和 bootstrap 来为我的应用程序提供服务，所以我什至不确定如果没有像 react 和 vue 这样的东西，这是否可能。这可以用@media 或浏览器JS 来完成吗？

index.html 文件：

{% extends 'base.html' %}

{% block body %}
    {% with messages = get_flashed_messages() %}
      {% if messages %}
        {% for message in messages %}
          <div class="alert alert-warning alert-dismissible" role="alert">
          <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
            {{message}}
          </div>
        {% endfor %}
      {% endif %}
    {% endwith %}
<div class="indices-container">
  <div class="row">
    {% for index in total_payload.get('indexes').get('meta_data') %}
    <div class="col-sm-2 text-center">
      {% set d = total_payload.get('indexes').get(index) %}
      {{ "{} ${:.2f}".format(index, d['current_price']) }}
      {{ "{:0.2f}% 1-Day".format(d['percent_change']) }}
      {{ "{:0.2f}% YTD".format(d['ytd_percent_change']) }}
    </div>
    {% endfor %}
  </div>
</div>
<div class="sp500-table-container">
  <div class="table-responsive" id="sp500Table">
    <table class="table table-light table-striped table-sm" id="sp500Table">
      <thead class="thead-light">
        <tr> {% for col in total_payload.get('companies').get('meta_data') %}
          <th>{{ col }}</th>
          {% endfor %}
        </tr>
      </thead>
      <tbody> {% for num, r in enumerate(total_payload.get('companies').get('sp500companies')) %}
        <tr>
          <td>{{ num+1 }}</td>
          <td>{{ r.get('Symbol') }}</td>
          <td>{{ r.get('Security') }}</td>
          <td><a href="{{ r.get('sec_filings') }}" target="_blank">link</a></td>
          <td>{{ r.get('Sector') }}</td>
          <td>{{ r.get('SubSector') }}</td>
          <td>{{ r.get('Headquarters') }}</td>
          <td>{{ r.get('DateFirstAdded') }}</td>
        </tr> {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p.name-price").css("color", "red");
  });
});
</script>
{% endblock %}

style.css 文件：

html {
    font-family: Arial, Helvetica, sans-serif;
}
body {
    /* padding-bottom: 80px; */
    /* height: 100% */
}
main {
    /* display: flex; */
    /* flex-direction: column; */
    /* flex-grow: 1; */
    padding-bottom: 80px;
    overflow: hidden;
}
footer {
    padding-top: 80px;
}
.indices-container {
    margin: auto;
}
.sp500-table-container {
    height: 70vh;
    width: 100vw;
    overflow: auto;
    position: relative;
    padding-bottom: 16px;
    margin: auto;
    /* flex: 1; */
    /* margin-bottom: 16px; */
}

【问题讨论】：

“这可以用@media 完成吗” - 是的 - 这正是它的用途。不，你不需要任何 JS。并且 VueJS + React 等不关心布局和样式。

标签： html css bootstrap-4 frontend

【解决方案1】：

这是使用 css 原生 Media Queries 完成的，不需要额外的库。

看起来像这样：

@media (max-width: 400px){
  .indicie-payment { display: none; }
  ...
}

但是

既然你说你已经在使用Bootstrap，那么你可以使用一些Bootstrap已经提供的utility classes for display

在您的情况下，您需要将一些项目包装在像 div 或 span 这样的元素中，并使用像 d-sm-none 这样的实用程序类

所以它可能看起来像这样：

<div class="indices-container">
  <div class="row">
    {% for index in total_payload.get('indexes').get('meta_data') %}
    <div class="col-sm-2 text-center">
      {% set d = total_payload.get('indexes').get(index) %}
      <span class="d-sm-none">{{ "{} ${:.2f}".format(index, d['current_price']) }}</span>
      <span class="d-sm-none">{{ "{:0.2f}% 1-Day".format(d['percent_change']) }}</span>
      {{ "{:0.2f}% YTD".format(d['ytd_percent_change']) }}
    </div>
    {% endfor %}
  </div>
</div>

【讨论】：