Как сделать HTML-текст страницы и таблицы адаптивными (с помощью JavaScript)

Question

Я пытаюсь сделать отзывчивую веб-страницу.Я пытался использовать height, style.height, style.OffsetHeight и т. Д., Но я не могу динамически создать квадратную таблицу.

Приведенный ниже код изменяет высоту, но высота и ширина таблицы не совпадают.

var width = table.offsetWidth;
table.setAttribute("style","height:"+ width + "px;");

• Нужно ли применять логику к ячейкам или к таблице?
• Как сделать текст (размер шрифта) и другие элементы отзывчивыми?
• Как найти 60% высоты экрана, чтобы вычислить минимальную ширину и высоту, чтобы установить их в качестве параметров таблицы?

Шаблон проектирования: Дизайн

код: jsfiddle

большое спасибо.

Answer 1

Я мог бы подумать, что вам нужно реализовать отдельную структуру HTML на основе div для мобильных представлений.Поскольку таблицы не могут быть настолько отзывчивыми, и вы можете отображать структуру HTML на основе div, используя медиа-запросы.

Вот пример этого.https://codepen.io/amwill04/pen/QNPpqx

Пример кода: HTML:

<div class="table" id="results">
  <div class='theader'>
    <div class='table_header'>Header One</div>
    <div class='table_header'>Header Two</div>
    <div class='table_header'>Header Three</div>
    <div class='table_header'>Header Four</div>
  </div>
  <div class='table_row'>
    <div class='table_small'>
      <div class='table_cell'>Header One</div>
      <div class='table_cell'>-1.2726</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Two</div>
      <div class='table_cell'>0.1311</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Three</div>
      <div class='table_cell'>-0.4782</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Four</div>
      <div class='table_cell'>-0.9919</div>
    </div>
  </div>
  <div class='table_row'>
    <div class='table_small'>
      <div class='table_cell'>Header One</div>
      <div class='table_cell'>-0.89</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Two</div>
      <div class='table_cell'>0.7986</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Three</div>
      <div class='table_cell'>0.876</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Four</div>
      <div class='table_cell'>0.498</div>
    </div>
  </div>
  <div class='table_row'>
    <div class='table_small'>
      <div class='table_cell'>Header One</div>
      <div class='table_cell'>-1.1669</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Two</div>
      <div class='table_cell'>0.4949</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Three</div>
      <div class='table_cell'>-0.7113</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Four</div>
      <div class='table_cell'>0.434</div>
    </div>
  </div>
  <div class='table_row'>
    <div class='table_small'>
      <div class='table_cell'>Header One</div>
      <div class='table_cell'>0.1996</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Two</div>
      <div class='table_cell'>-0.7693</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Three</div>
      <div class='table_cell'>1.974</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Four</div>
      <div class='table_cell'>-0.959</div>
    </div>
  </div>
  <div class='table_row'>
    <div class='table_small'>
      <div class='table_cell'>Header One</div>
      <div class='table_cell'>-1.5998</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Two</div>
      <div class='table_cell'>-0.1149</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Three</div>
      <div class='table_cell'>1.3888</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Four</div>
      <div class='table_cell'>-0.0689</div>
    </div>
  </div>
</div>

CSS:

.table {
    display: table;
    text-align: center;
    width: 60%;
    margin: 10% auto 0;
    border-collapse: separate;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
  }

  .table_row {
    display: table-row;
  }

  .theader {
    display: table-row;
  }

  .table_header {
    display: table-cell;
    border-bottom: #ccc 1px solid;
    border-top: #ccc 1px solid;
    background: #bdbdbd;
    color: #e5e5e5;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: 700;
  }

  .table_header:first-child {
    border-left: #ccc 1px solid;
    border-top-left-radius: 5px;
  }

  .table_header:last-child {
    border-right: #ccc 1px solid;
    border-top-right-radius: 5px;
  }

  .table_small {
    display: table-cell;
  }

  .table_row > .table_small > .table_cell:nth-child(odd) {
    display: none;
    background: #bdbdbd;
    color: #e5e5e5;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .table_row > .table_small > .table_cell {
    padding-top: 3px;
    padding-bottom: 3px;
    color: #5b5b5b;
    border-bottom: #ccc 1px solid;
  }

  .table_row > .table_small:first-child > .table_cell {
    border-left: #ccc 1px solid;
  }

  .table_row > .table_small:last-child > .table_cell {
    border-right: #ccc 1px solid;
  }

  .table_row:last-child > .table_small:last-child > .table_cell:last-child {
    border-bottom-right-radius: 5px;
  }

  .table_row:last-child > .table_small:first-child > .table_cell:last-child {
    border-bottom-left-radius: 5px;
  }

  .table_row:nth-child(2n+3) {
    background: #e9e9e9;
  }

  @media screen and (max-width: 900px) {
    .table {
      width: 90%
    }
  }

  @media screen and (max-width: 650px) {
    .table {
      display: block;
    }
    .table_row:nth-child(2n+3) {
      background: none;
    }
    .theader {
      display: none;
    }
    .table_row > .table_small > .table_cell:nth-child(odd) {
      display: table-cell;
      width: 50%;
    }
    .table_cell {
      display: table-cell;
      width: 50%;
    }
    .table_row {
      display: table;
      width: 100%;
      border-collapse: separate;
      padding-bottom: 20px;
      margin: 5% auto 0;
      text-align: center;
    }
    .table_small {
      display: table-row;
    }
    .table_row > .table_small:first-child > .table_cell:last-child {
      border-left: none;
    }
    .table_row > .table_small > .table_cell:first-child {
      border-left: #ccc 1px solid;
    }
    .table_row > .table_small:first-child > .table_cell:first-child {
      border-top-left-radius: 5px;
      border-top: #ccc 1px solid;
    }
    .table_row > .table_small:first-child > .table_cell:last-child {
      border-top-right-radius: 5px;
      border-top: #ccc 1px solid;
    }
    .table_row > .table_small:last-child > .table_cell:first-child {
      border-right: none;
    }
    .table_row > .table_small > .table_cell:last-child {
      border-right: #ccc 1px solid;
    }
    .table_row > .table_small:last-child > .table_cell:first-child {
      border-bottom-left-radius: 5px;
    }
    .table_row > .table_small:last-child > .table_cell:last-child {
      border-bottom-right-radius: 5px;
    }
  }

Надеюсь, вы получилиточка.

Answer 2

1.Вы можете применить логику на столе.Приведенный ниже код будет работать для динамического изменения размера:

window.addEventListener('resize',handlersize);

function handlersize(){
  width = table.offsetWidth;
  table.setAttribute("style", "height:" + width + "px;")
}

Чтобы изменить размер шрифта, используйте стиль шрифта css style: 3vw;или около того в зависимости от требования.

3.Чтобы получить 60% высоты экрана:

var element = document.getElementsByTagName("BODY")[0];
height = element.offsetHeight;
height = height * 0.6;

Answer 3

Проверьте эту JSFiddle ссылку

Вам необходимо добавить resize прослушиватель событий в окне.При изменении размера окна будет вызвана функция handlersize.Это будет обновлять высоту ваших таблиц каждый раз, когда размер вашего окна изменяется

window.addEventListener('resize',handlersize);

function handlersize(){
  width = table.offsetWidth;
  table.setAttribute("style", "height:" + width + "px;")
}