- 13, May 2024
- #1
Прошло много времени с тех пор, как мне нужна была помощь по HTML и CSS, так что либо это чушь, либо я все еще идиот.
В свободное время я разрабатываю POS-приложение для ресторанов.
Я не уделял слишком много внимания скорости реагирования, поскольку она будет работать в киоске фиксированного размера, но возможности расширились, и теперь я хочу, чтобы все было отзывчиво.
9 из 10 страниц я конвертировал без проблем, но эта меня зацепила.
Ранее я создал его, и он отлично работал с таблицами и вложенными элементами div в каждой ячейке.
В общем, у меня есть сетка кнопок размером 6*8. Достаточно легко.
За исключением того, что я хочу сохранить возможность настройки по размерам экрана - поэтому каждая кнопка имеет класс - нормальный, doubleHeight, doubleWidth ИЛИ doubleWidthAndHeight.
То, что они делают, должно быть понятным, и каждая кнопка имеет указанную ячейку, и если высота или ширина превышает ячейку, кнопка просто выходит за ее пределы и занимает также следующую ячейку. Вот пример изображения того, как это (раньше) выглядело: Код для этого будет:
Этот div содержится в гибком контейнере.
Я подумываю сделать это полностью с помощью гибких элементов, но не могу придумать, как это разметить.
Я бы хотел, чтобы каждая кнопка определялась в процентах относительно контейнера, а не в em или px (но тогда невозможно иметь ширину или высоту 200%). Применение процентной ширины к td, похоже, также вызывает у меня проблемы, но код сейчас настолько сломан из-за экспериментов, что я не уверен на 100%. Также поигрались с rowspan и colspan.
Любые идеи будут приветствоваться.
Я не уделял слишком много внимания скорости реагирования, поскольку она будет работать в киоске фиксированного размера, но возможности расширились, и теперь я хочу, чтобы все было отзывчиво.
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>Этот div содержится в гибком контейнере.
Я подумываю сделать это полностью с помощью гибких элементов, но не могу придумать, как это разметить.
Я бы хотел, чтобы каждая кнопка определялась в процентах относительно контейнера, а не в em или px (но тогда невозможно иметь ширину или высоту 200%). Применение процентной ширины к td, похоже, также вызывает у меня проблемы, но код сейчас настолько сломан из-за экспериментов, что я не уверен на 100%. Также поигрались с rowspan и colspan.
Любые идеи будут приветствоваться.
![[Виктория Волевач] Всегда молода](/assets/images/icons/forum2.png){kind=icon}
![[Фишка] Кач для 90+](/assets/images/icons/forum6.png){kind=icon}