CSS адаптивная сетка из квадратов

Я создаю настольную игру, в которой я хочу отображать доску квадратных полей, которые всегда соответствуют 100% высоты и/или ширины экрана (полоса прокрутки никогда не должна появляться), поэтому она должна отвечать как по вертикали, так и по горизонтали. Количество строк и столбцов является динамическим.

Кроме того, доска должна менять свою ориентацию в зависимости от того, есть ли больше строк или столбцов для отображения. Небольшой обзор в изображениях того, чего я пытаюсь достичь:

Горизонтальная ориентация (большой экран):

Горизонтальная ориентация (маленький экран):

Вертикальная ориентация:

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

Вот фрагмент моей структуры кода, которая, как и следовало ожидать, довольно стандартна (сгенерирована Angular):

Решения, которые я пытался использовать, были такими: grid-of-square неадекватны и недостаточны для меня. Сетка либо не охватывает должным образом ширину/высоту экрана (эти значения vw/vh действительно не имеют для меня смысла), либо хорошо реагирует только в одном направлении.

Я открыт для советов по использованию flex/bootstrap/plain CSS.

Это первая проблема, которую мне не удалось решить в CSS за неограниченное количество времени.. :|


css responsive square
person Dedemonn    schedule 26.09.2019    source источник
comment
Вы хотите решение в angular или jquery?   -  person Fahim Khan    schedule 26.09.2019
comment
сколько здесь квадратов, 50 или 250? это фиксированная сумма? Какой у вас шаблон? скриншоты бесполезны и не подходят для демонстрации   -  person G-Cyrillus    schedule 26.09.2019
comment
это для сетки судоку? stackoverflow.com/questions/37105579/ , или вот пример с vmin codepen.io/gc-nomade/pen/vYBMLyX о vh,vw,vmax и vmin, вот объяснение среди прочего web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin- вмакс   -  person G-Cyrillus    schedule 26.09.2019
comment
@FahimKhan предпочтительно в CSS, но если это невозможно, то в Angular   -  person Dedemonn    schedule 26.09.2019
comment
Я новичок в angular, но у меня есть решение в jquery, если вы конвертируете его в angular, поэтому я публикую его.   -  person Fahim Khan    schedule 26.09.2019
comment
@ G-Cyr Я планирую, что сейчас он будет не более 20x20. Как я уже говорил, доска динамическая и может иметь любое количество столбцов и строк. Поскольку я хотел бы сделать это в CSS, последнего экрана должно быть достаточно, чтобы увидеть, как выглядит HTML (там тоже ничего экстраординарного — просто ряды div).   -  person Dedemonn    schedule 26.09.2019
comment
CSS может легко обрабатывать известное количество элементов, когда оно случайное, становится сложно сохранить соотношение 1:1. даже через медиазапрос он сломается. Вам нужен javascript, чтобы заполнить вашу сетку и изменить размер ячеек или, по крайней мере, обновить шаблон сетки/строки/столбцы, если вы собираетесь использовать display:grid. строки шаблона сетки: повтор (x, 1fr); grid-template-columns:repeat(x,1fr) , где x — это значение, которое будет обновляться после подсчета количества ячеек и проверки ориентации. высота и ширина также могут быть сброшены вместо использования значений vmin, если только 1fr из шаблонов также не обновляется.   -  person G-Cyrillus    schedule 26.09.2019

Ответы (1)


arrow_upward
0
arrow_downward

Итак, в конце концов, из-за отсутствия других предложений, я пошел по пути, которого не хотел с самого начала, - достигнув этого с помощью @HostListener('window:resize') и логики расчета размера поля в соответствии с ориентацией доски.

person Dedemonn    schedule 03.12.2019