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

Posted 2023-03-05

【中文标题】如何根据屏幕大小更改 div 内容

【英文标题】：How to change div content based on screen size

【发布时间】：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 等不关心布局和样式。

【参考方案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>