Прошло много времени с тех пор, как мне нужна была помощь по HTML и CSS, так что либо это чушь, либо я все еще идиот.
В свободное время я разрабатываю POS-приложение для ресторанов. Я не уделял слишком много внимания скорости реагирования, поскольку она будет работать в киоске фиксированного размера, но возможности расширились, и теперь я хочу, чтобы все было отзывчиво. 9 из 10 страниц я конвертировал без проблем, но эта меня зацепила. Ранее я создал его, и он отлично работал с таблицами и вложенными элементами div в каждой ячейке.
В общем, у меня есть сетка кнопок размером 6*8. Достаточно легко. За исключением того, что я хочу сохранить возможность настройки по размерам экрана - поэтому каждая кнопка имеет класс - нормальный, doubleHeight, doubleWidth ИЛИ doubleWidthAndHeight. То, что они делают, должно быть понятным, и каждая кнопка имеет указанную ячейку, и если высота или ширина превышает ячейку, кнопка просто выходит за ее пределы и занимает также следующую ячейку.
Вот пример изображения того, как это (раньше) выглядело:
Код для этого будет:
Код (разметка): Однако я действительно не уверен, как к этому подойти плавно. Этот div содержится в гибком контейнере. Я подумываю сделать это полностью с помощью гибких элементов, но не могу придумать, как это разметить. Я бы хотел, чтобы каждая кнопка определялась в процентах относительно контейнера, а не в em или px (но тогда невозможно иметь ширину или высоту 200%). Применение процентной ширины к td, похоже, также вызывает у меня проблемы, но код сейчас настолько сломан из-за экспериментов, что я не уверен на 100%. Также поигрались с rowspan и colspan.
Любые идеи будут приветствоваться.
В свободное время я разрабатываю POS-приложение для ресторанов. Я не уделял слишком много внимания скорости реагирования, поскольку она будет работать в киоске фиксированного размера, но возможности расширились, и теперь я хочу, чтобы все было отзывчиво. 9 из 10 страниц я конвертировал без проблем, но эта меня зацепила. Ранее я создал его, и он отлично работал с таблицами и вложенными элементами div в каждой ячейке.
В общем, у меня есть сетка кнопок размером 6*8. Достаточно легко. За исключением того, что я хочу сохранить возможность настройки по размерам экрана - поэтому каждая кнопка имеет класс - нормальный, doubleHeight, doubleWidth ИЛИ doubleWidthAndHeight. То, что они делают, должно быть понятным, и каждая кнопка имеет указанную ячейку, и если высота или ширина превышает ячейку, кнопка просто выходит за ее пределы и занимает также следующую ячейку.
Вот пример изображения того, как это (раньше) выглядело:
Код для этого будет:
Код:
<tr> <td><!--[Burger button.doubleWidthAndHeight--></td> <td></td> <td><!--[Remove Pineapple button.normal--></td> <td></td> <td></td> <td></td>
</tr>
<tr> <td></td> <td></td> <td><!--[Add bacon button.normal--></td> <td></td> <td></td> <td></td>
</tr>Любые идеи будут приветствоваться.
