Сделайте матрицу из DIVS отзывчивой - PullRequest
Новая
       0

Сделайте матрицу из DIVS отзывчивой

0 голосов
/ 07 февраля 2020

У меня есть этот пример кода для отображения матрицы карт из колоды.

https://codepen.io/thereitis1/pen/LYVYqKX

<div class="container">
  <div class="matrix">
  <div class="combo pair selected">AA</div>
  <div class="combo suited selected">AKs</div>
  <div class="combo suited selected">AQs</div>
  <div class="combo suited selected">AJs</div>
  <div class="combo suited selected">ATs</div>
  <div class="combo suited selected">A9s</div>
  <div class="combo suited selected">A8s</div>
  <div class="combo suited selected">A7s</div>
  <div class="combo suited selected">A6s</div>
  <div class="combo suited selected">A5s</div>
  <div class="combo suited selected">A4s</div>
  <div class="combo suited selected">A3s</div>
  <div class="combo suited selected">A2s</div>
  <div class="combo off-suit selected">AKo</div>
  <div class="combo pair selected">KK</div>
  <div class="combo suited">KQs</div>
  <div class="combo suited">KJs</div>
  <div class="combo suited">KTs</div>
  <div class="combo suited">K9s</div>
  <div class="combo suited">K8s</div>
  <div class="combo suited">K7s</div>
  <div class="combo suited">K6s</div>
  <div class="combo suited">K5s</div>
  <div class="combo suited">K4s</div>
  <div class="combo suited">K3s</div>
  <div class="combo suited">K2s</div>
  <div class="combo off-suit">AQo</div>
  <div class="combo off-suit">KQo</div>
  <div class="combo pair selected">QQ</div>
  <div class="combo suited">QJs</div>
  <div class="combo suited">QTs</div>
  <div class="combo suited">Q9s</div>
  <div class="combo suited">Q8s</div>
  <div class="combo suited">Q7s</div>
  <div class="combo suited">Q6s</div>
  <div class="combo suited">Q5s</div>
  <div class="combo suited">Q4s</div>
  <div class="combo suited">Q3s</div>
  <div class="combo suited">Q2s</div>
  <div class="combo off-suit">AJo</div>
  <div class="combo off-suit">KJo</div>
  <div class="combo off-suit">QJo</div>
  <div class="combo pair selected">JJ</div>
  <div class="combo suited">JTs</div>
  <div class="combo suited">J9s</div>
  <div class="combo suited">J8s</div>
  <div class="combo suited">J7s</div>
  <div class="combo suited">J6s</div>
  <div class="combo suited">J5s</div>
  <div class="combo suited">J4s</div>
  <div class="combo suited">J3s</div>
  <div class="combo suited">J2s</div>
  <div class="combo off-suit">ATo</div>
  <div class="combo off-suit">KTo</div>
  <div class="combo off-suit">QTo</div>
  <div class="combo off-suit">JTo</div>
  <div class="combo pair selected">TT</div>
  <div class="combo suited">T9s</div>
  <div class="combo suited">T8s</div>
  <div class="combo suited">T7s</div>
  <div class="combo suited">T6s</div>
  <div class="combo suited">T5s</div>
  <div class="combo suited">T4s</div>
  <div class="combo suited">T3s</div>
  <div class="combo suited">T2s</div>
  <div class="combo off-suit">A9o</div>
  <div class="combo off-suit">K9o</div>
  <div class="combo off-suit">Q9o</div>
  <div class="combo off-suit">J9o</div>
  <div class="combo off-suit">T9o</div>
  <div class="combo pair selected">99</div>
  <div class="combo suited">98s</div>
  <div class="combo suited">97s</div>
  <div class="combo suited">96s</div>
  <div class="combo suited">95s</div>
  <div class="combo suited">94s</div>
  <div class="combo suited">93s</div>
  <div class="combo suited">92s</div>
  <div class="combo off-suit">A8o</div>
  <div class="combo off-suit">K8o</div>
  <div class="combo off-suit">Q8o</div>
  <div class="combo off-suit">J8o</div>
  <div class="combo off-suit">T8o</div>
  <div class="combo off-suit">98o</div>
  <div class="combo pair">88</div>
  <div class="combo suited">87s</div>
  <div class="combo suited">86s</div>
  <div class="combo suited">85s</div>
  <div class="combo suited">84s</div>
  <div class="combo suited">83s</div>
  <div class="combo suited">82s</div>
  <div class="combo off-suit">A7o</div>
  <div class="combo off-suit">K7o</div>
  <div class="combo off-suit">Q7o</div>
  <div class="combo off-suit">J7o</div>
  <div class="combo off-suit">T7o</div>
  <div class="combo off-suit">97o</div>
  <div class="combo off-suit">87o</div>
  <div class="combo pair">77</div>
  <div class="combo suited">76s</div>
  <div class="combo suited">75s</div>
  <div class="combo suited">74s</div>
  <div class="combo suited">73s</div>
  <div class="combo suited">72s</div>
  <div class="combo off-suit">A6o</div>
  <div class="combo off-suit">K6o</div>
  <div class="combo off-suit">Q6o</div>
  <div class="combo off-suit">J6o</div>
  <div class="combo off-suit">T6o</div>
  <div class="combo off-suit">96o</div>
  <div class="combo off-suit">86o</div>
  <div class="combo off-suit">760</div>
  <div class="combo pair">66</div>
  <div class="combo suited">65s</div>
  <div class="combo suited">64s</div>
  <div class="combo suited">63s</div>
  <div class="combo suited">62s</div>
  <div class="combo off-suit">A5o</div>
  <div class="combo off-suit">K5o</div>
  <div class="combo off-suit">Q5o</div>
  <div class="combo off-suit">J5o</div>
  <div class="combo off-suit">T5o</div>
  <div class="combo off-suit">95o</div>
  <div class="combo off-suit">85o</div>
  <div class="combo off-suit">75o</div>
  <div class="combo off-suit">65o</div>
  <div class="combo pair">55</div>
  <div class="combo suited">54s</div>
  <div class="combo suited">53s</div>
  <div class="combo suited">52s</div>
  <div class="combo off-suit">A4o</div>
  <div class="combo off-suit">K4o</div>
  <div class="combo off-suit">Q4o</div>
  <div class="combo off-suit">J4o</div>
  <div class="combo off-suit">T4o</div>
  <div class="combo off-suit">94o</div>
  <div class="combo off-suit">84o</div>
  <div class="combo off-suit">74o</div>
  <div class="combo off-suit">64o</div>
  <div class="combo off-suit">54o</div>
  <div class="combo pair">44</div>
  <div class="combo suited">43s</div>
  <div class="combo suited">42s</div>
  <div class="combo off-suit">A3o</div>
  <div class="combo off-suit">K3o</div>
  <div class="combo off-suit">Q3o</div>
  <div class="combo off-suit">J3o</div>
  <div class="combo off-suit">T3o</div>
  <div class="combo off-suit">93o</div>
  <div class="combo off-suit">83o</div>
  <div class="combo off-suit">73o</div>
  <div class="combo off-suit">63o</div>
  <div class="combo off-suit">53o</div>
  <div class="combo off-suit">43o</div>
  <div class="combo pair">33</div>
  <div class="combo suited">32s</div>
  <div class="combo off-suit">A2o</div>
  <div class="combo off-suit">K2o</div>
  <div class="combo off-suit">Q2o</div>
  <div class="combo off-suit">J2o</div>
  <div class="combo off-suit">T2o</div>
  <div class="combo off-suit">92o</div>
  <div class="combo off-suit">82o</div>
  <div class="combo off-suit">72o</div>
  <div class="combo off-suit">62o</div>
  <div class="combo off-suit">52o</div>
  <div class="combo off-suit">42o</div>
  <div class="combo off-suit">32o</div>
  <div class="combo pair">22</div>
</div>

Я хочу найти самый простой способ сделать его отзывчивым, чтобы, если я открою его на маленьком телефоне, таком как iPhone SE, он полностью уместится, и займет 100% ширины устройства. И он будет иметь максимальную ширину 500 пикселей; на больших устройствах. Высота и ширина ячеек должны увеличиваться пропорционально

Мои вопросы касаются таких вещей, как

  • Должен ли я установить ширину каждой ячейки равной%, как 7 %, поэтому размер каждой ячейки изменяется?

  • Как настроить высоту в соответствии с шириной?

Любая помощь по этому вопросу очень ценится.

1 Ответ

1 голос
/ 07 февраля 2020

Вам нужно использовать медиа-запросы в вас css. (при необходимости), например: 

@media (min-width: 320px) and (max-width: 480px) {
.combo{
  width:100%;
  height:40px;
}

}

Проверка медиазапросов для всех экранов: Медиазапросы 

function navigate(tabName){
  $('#config-tab').removeClass('active');
  $('#results-tab').removeClass('active');
  
  $('#config').removeClass('show');
  $('#config').removeClass('active');  
  $('#results').removeClass('show');
  $('#results').removeClass('active');
  
  $('#' + tabName + '-tab').addClass('active');
   $('#'+tabName).addClass('show');
   $('#'+tabName).addClass('active');
}
.container{
  display:grid;
  grid-template-column:300px auto;
  grid-template-row:auto auto auto;
}

.matrix{
  display:grid;
  grid-gap:1px;
  grid-column:1;
  grid-row:1;
}
.options{
  grid-column:1;
  grid-row:2;
}

.combo{
  border:1px solid #898989;
  margin:1px;
  display:flex;
  align-items:center;
  justify-content:space-around;
  font-size:.75em;
  border-radius:3px;  
}

.pair{
  background-color:#c3c3c3;  
  border: 1px solid #c3c3c3;
  border-bottom: 2px solid #c3c3c3;
  border-right: 2px solid #c3c3c3;
}

.suited{
  background-color:#ddd;  
  border: 1px solid #ddd;
  border-bottom: 2px solid #ddd;
  border-right: 2px solid #ddd;
}
.off-suit{
  background-color:#ddd;  
  border: 1px solid #ddd;
  border-bottom: 2px solid #ddd;
  border-right: 2px solid #ddd;
}

.tab-content{
  border:1px solid #dee2e6;
  border-top:none;  
  min-height:200px;
}

.selected{
  background-color:#00AA00;
  color:#fff;
  border-bottom: 2px solid #00BB00;
  border-right: 2px solid #00BB00;
}

@media (min-width: 1025px) {
  .matrix{
    width:300px;
  grid-template-columns:auto auto auto auto auto auto auto auto auto auto auto auto auto;
}
  
 .combo{ width:40px;
  height:40px;
  }
  
}

@media (min-width: 320px) and (max-width: 480px) {
 .matrix{
    width:100%;
  grid-template-columns:auto ;
}
  .combo{
  width:100%;
  height:40px;
  }
}
<div class="container">
  <div class="matrix">
  <div class="combo pair selected">AA</div>
  <div class="combo suited selected">AKs</div>
  <div class="combo suited selected">AQs</div>
  <div class="combo suited selected">AJs</div>
  <div class="combo suited selected">ATs</div>
  <div class="combo suited selected">A9s</div>
  <div class="combo suited selected">A8s</div>
  <div class="combo suited selected">A7s</div>
  <div class="combo suited selected">A6s</div>
  <div class="combo suited selected">A5s</div>
  <div class="combo suited selected">A4s</div>
  <div class="combo suited selected">A3s</div>
  <div class="combo suited selected">A2s</div>
  <div class="combo off-suit selected">AKo</div>
  <div class="combo pair selected">KK</div>
  <div class="combo suited">KQs</div>
  <div class="combo suited">KJs</div>
  <div class="combo suited">KTs</div>
  <div class="combo suited">K9s</div>
  <div class="combo suited">K8s</div>
  <div class="combo suited">K7s</div>
  <div class="combo suited">K6s</div>
  <div class="combo suited">K5s</div>
  <div class="combo suited">K4s</div>
  <div class="combo suited">K3s</div>
  <div class="combo suited">K2s</div>
  <div class="combo off-suit">AQo</div>
  <div class="combo off-suit">KQo</div>
  <div class="combo pair selected">QQ</div>
  <div class="combo suited">QJs</div>
  <div class="combo suited">QTs</div>
  <div class="combo suited">Q9s</div>
  <div class="combo suited">Q8s</div>
  <div class="combo suited">Q7s</div>
  <div class="combo suited">Q6s</div>
  <div class="combo suited">Q5s</div>
  <div class="combo suited">Q4s</div>
  <div class="combo suited">Q3s</div>
  <div class="combo suited">Q2s</div>
  <div class="combo off-suit">AJo</div>
  <div class="combo off-suit">KJo</div>
  <div class="combo off-suit">QJo</div>
  <div class="combo pair selected">JJ</div>
  <div class="combo suited">JTs</div>
  <div class="combo suited">J9s</div>
  <div class="combo suited">J8s</div>
  <div class="combo suited">J7s</div>
  <div class="combo suited">J6s</div>
  <div class="combo suited">J5s</div>
  <div class="combo suited">J4s</div>
  <div class="combo suited">J3s</div>
  <div class="combo suited">J2s</div>
  <div class="combo off-suit">ATo</div>
  <div class="combo off-suit">KTo</div>
  <div class="combo off-suit">QTo</div>
  <div class="combo off-suit">JTo</div>
  <div class="combo pair selected">TT</div>
  <div class="combo suited">T9s</div>
  <div class="combo suited">T8s</div>
  <div class="combo suited">T7s</div>
  <div class="combo suited">T6s</div>
  <div class="combo suited">T5s</div>
  <div class="combo suited">T4s</div>
  <div class="combo suited">T3s</div>
  <div class="combo suited">T2s</div>
  <div class="combo off-suit">A9o</div>
  <div class="combo off-suit">K9o</div>
  <div class="combo off-suit">Q9o</div>
  <div class="combo off-suit">J9o</div>
  <div class="combo off-suit">T9o</div>
  <div class="combo pair selected">99</div>
  <div class="combo suited">98s</div>
  <div class="combo suited">97s</div>
  <div class="combo suited">96s</div>
  <div class="combo suited">95s</div>
  <div class="combo suited">94s</div>
  <div class="combo suited">93s</div>
  <div class="combo suited">92s</div>
  <div class="combo off-suit">A8o</div>
  <div class="combo off-suit">K8o</div>
  <div class="combo off-suit">Q8o</div>
  <div class="combo off-suit">J8o</div>
  <div class="combo off-suit">T8o</div>
  <div class="combo off-suit">98o</div>
  <div class="combo pair">88</div>
  <div class="combo suited">87s</div>
  <div class="combo suited">86s</div>
  <div class="combo suited">85s</div>
  <div class="combo suited">84s</div>
  <div class="combo suited">83s</div>
  <div class="combo suited">82s</div>
  <div class="combo off-suit">A7o</div>
  <div class="combo off-suit">K7o</div>
  <div class="combo off-suit">Q7o</div>
  <div class="combo off-suit">J7o</div>
  <div class="combo off-suit">T7o</div>
  <div class="combo off-suit">97o</div>
  <div class="combo off-suit">87o</div>
  <div class="combo pair">77</div>
  <div class="combo suited">76s</div>
  <div class="combo suited">75s</div>
  <div class="combo suited">74s</div>
  <div class="combo suited">73s</div>
  <div class="combo suited">72s</div>
  <div class="combo off-suit">A6o</div>
  <div class="combo off-suit">K6o</div>
  <div class="combo off-suit">Q6o</div>
  <div class="combo off-suit">J6o</div>
  <div class="combo off-suit">T6o</div>
  <div class="combo off-suit">96o</div>
  <div class="combo off-suit">86o</div>
  <div class="combo off-suit">760</div>
  <div class="combo pair">66</div>
  <div class="combo suited">65s</div>
  <div class="combo suited">64s</div>
  <div class="combo suited">63s</div>
  <div class="combo suited">62s</div>
  <div class="combo off-suit">A5o</div>
  <div class="combo off-suit">K5o</div>
  <div class="combo off-suit">Q5o</div>
  <div class="combo off-suit">J5o</div>
  <div class="combo off-suit">T5o</div>
  <div class="combo off-suit">95o</div>
  <div class="combo off-suit">85o</div>
  <div class="combo off-suit">75o</div>
  <div class="combo off-suit">65o</div>
  <div class="combo pair">55</div>
  <div class="combo suited">54s</div>
  <div class="combo suited">53s</div>
  <div class="combo suited">52s</div>
  <div class="combo off-suit">A4o</div>
  <div class="combo off-suit">K4o</div>
  <div class="combo off-suit">Q4o</div>
  <div class="combo off-suit">J4o</div>
  <div class="combo off-suit">T4o</div>
  <div class="combo off-suit">94o</div>
  <div class="combo off-suit">84o</div>
  <div class="combo off-suit">74o</div>
  <div class="combo off-suit">64o</div>
  <div class="combo off-suit">54o</div>
  <div class="combo pair">44</div>
  <div class="combo suited">43s</div>
  <div class="combo suited">42s</div>
  <div class="combo off-suit">A3o</div>
  <div class="combo off-suit">K3o</div>
  <div class="combo off-suit">Q3o</div>
  <div class="combo off-suit">J3o</div>
  <div class="combo off-suit">T3o</div>
  <div class="combo off-suit">93o</div>
  <div class="combo off-suit">83o</div>
  <div class="combo off-suit">73o</div>
  <div class="combo off-suit">63o</div>
  <div class="combo off-suit">53o</div>
  <div class="combo off-suit">43o</div>
  <div class="combo pair">33</div>
  <div class="combo suited">32s</div>
  <div class="combo off-suit">A2o</div>
  <div class="combo off-suit">K2o</div>
  <div class="combo off-suit">Q2o</div>
  <div class="combo off-suit">J2o</div>
  <div class="combo off-suit">T2o</div>
  <div class="combo off-suit">92o</div>
  <div class="combo off-suit">82o</div>
  <div class="combo off-suit">72o</div>
  <div class="combo off-suit">62o</div>
  <div class="combo off-suit">52o</div>
  <div class="combo off-suit">42o</div>
  <div class="combo off-suit">32o</div>
  <div class="combo pair">22</div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...