Одинаковый размер элемента на каждом экране устройства
Это мой код:
<div class = "box cntr" style = "width: 52.9134px; height: 52.9134px; background: #c04848; border-radius: 50%;">
<h2 id = "amount" style = "text-align: center">3</h2>
</div>Ширина составляет 52,9134 пикселей, но когда вы откроете его на другом устройстве, элемент станет меньше исходного размера на экране рабочего стола. Я хочу, чтобы элемент был одинакового размера на всех устройствах, таких как iPhone, iPad, телефоны Android и т. д.
какой у Вас вопрос? ширина элемента будет 52 пикселя на всех экранах. 52 пикселя будут выглядеть по-разному на всех экранах из-за разного разрешения.
использование em вместо px может решить проблему, в противном случае вам нужно написать медиа-запрос в css для другого разрешения экрана
Прекратите помечать несвязанные теги.
Ответы 3
Вы можете проверить с помощью отладки, что когда он виден на других устройствах, он переопределяется.
Если это так, вы можете добавить !important после вашего стиля следующим образом
width: 52.9134px !important;
То же самое и для всех остальных стилей.
Или, если они не отменены, и вы не хотите использовать !important (потому что некоторые скажут, что это не соответствует стандартам), тогда можно использовать max и min в соответствии с вашими потребностями.
Если они видны меньше, чем min-width: 52.9134px, или если они видны больше, то max-width: 52.9134px. То же самое и для других стилей.
Но помните одну вещь: вы должны использовать !important, если maxmin тоже переопределяется.
Ты можешь использовать
.myClass{
height: 15vw; /* or vh */
width: 15vw; /* or vh */
}
чтобы сохранить фиксированное соотношение сторон экрана и элемента.
Но у вас будут проблемы с портретным и альбомным режимами. Вам нужно будет написать медиа-запрос или сделать что-нибудь с js, чтобы учесть это.
Вы также можете использовать em или rem. rem обойдет любые изменения, внесенные вами в размер шрифта в предыдущем контейнере.
Вы установили область просмотра в HTML?
У вас установлена ширина для HTML или основного элемента?
Чтобы предотвратить «умное» изменение размера с телефонов и планшетов, вы должны добавить метатег видового экрана в head документа:
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
Этот тег предписывает браузеру НЕ уменьшать масштаб. Он указывает браузеру придерживаться ширины устройства и НЕ масштабировать.
ширина одинакова на всех устройствах, но поскольку разрешения экрана различаются от одного к другому, вы видите разную ширину. например, 1px в разрешении HD сильно отличается от 1px в разрешении 4k.