NativeScript: как сделать квадратную кнопку с css без жесткого кодирования ширины и высоты

Question

Я пишу приложение с Angular 8 и NativeScript 6.4.1.

Я хочу создать идеально квадратную кнопку. Я не могу жестко запрограммировать высоту и ширину.

e.g. height: 20px width: 20px мне не подходит, потому что мое приложение будет работать на разных устройствах с разными размерами экрана.

Я попробовал следующие предложения:

https://spin.atomicobject.com/2015/07/14/css-responsive-square/

https://dev.to/tchaflich/a-width-responsive-perfect-square-in-pure-css-3dao

Кажется, это не работает для меня.

Вот моя игровая площадка:

https://play.nativescript.org/?template=play-ng&id=j8Gsd1&v=3

Как сделать идеально квадратные кнопки?

фрагмент кода:

.sqaure-button {
    height: 40%;
    width: 40%;
}

.sqaure-button:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
    <Button class="sqaure-button" backgroundColor="pink"></Button>

Это изображение является желаемым результатом в Условия размеров квадрата и размера устройства:

Answer 1

Я попробовал это снова, и больше ничего в моем слое просмотра; просто кнопка.

Я получил совершенно квадратную кнопку, используя единицы измерения 'dp'.

.button-square {
    height: 90dp;
    width: 90dp;
}

<ActionBar title="Home">
</ActionBar>

<Button class="button-square" backgroundColor="pink"></Button>

Вот моя игровая площадка: https://play.nativescript.org/?template=play-ng&id=j8Gsd1&v=6

Я пробовал с процентами, и он не работает:

.button-square {
    height: 40%;
    width: 40%;
}

Answer 2

.square-button {
 width: 40%;
 height: 40%;
}

Это на самом деле должно работать случайно, я думаю, что вероятность того, что что-то вроде этого даст квадрат, очень мала, и это работает только тогда, когда родитель является квадратом. Вы говорите, возьмите 40% высоты родителя, скажите, что это 1000px, и возьмите 40% ширины родителя, скажите, что это 2000px, Теперь вы понимаете, почему это не квадрат?

Нам нужно взять лучшую ссылку, чем ширина / высота родительского элемента, поскольку они не будут одинаковыми, динамически используя js или что-либо другое, установите ширину / высоту равной 50% высоты родительского элемента. Это должно дать квадрат, Теперь отредактируйте его в соответствии с вашими потребностями, Возможно, установите один (ширина или высота) от родителя и установите другой как тот, который вы уже установили.