я сделал все правильно но все равно оно не подстраивается под форматВ примере выше у тебя там солянка, и адаптивные единицы и нет.
я сделал все правильно но все равно оно не подстраивается под форматВ примере выше у тебя там солянка, и адаптивные единицы и нет.
Возьми скрипт с редаги. у тебя же карта не статичная, может расширение экрана, может карта в трёх положениях. Может её не быть.я сделал все правильно но все равно оно не подстраивается под формат
Посмотреть вложение 20328
Возьми скрипт с редаги. у тебя же карта не статичная, может расширение экрана, может карта в трёх положениях. Может её не быть.
const container = document.createElement('div');
container.id = 'notification-container';
document.body.appendChild(container);
const maxNotifications = 5;
const visibleTime = 2000;
const fadeTime = 300;
if ('alt' in window) {
alt.on('showHUDNotify', (data) => {
const notif = document.createElement('div');
notif.classList.add('notify', 'show');
const img = document.createElement('img');
img.src = data.iconSrc || 'hud/icon-green.png';
img.style.width = data.width || '1.1vw';
img.style.height = data.height || '1.1vw';
notif.appendChild(img);
const text = document.createElement('span');
text.innerHTML = `
${data.textPrefix || ''}
<strong style="color: ${data.actionColor || '#00BC38'}">${data.actionText || 'зашли'}</strong>
${data.zoneText || ''}
`;
notif.appendChild(text);
container.appendChild(notif);
// Удаление при переполнении
if (container.children.length > maxNotifications) {
const first = container.firstChild;
first.classList.remove('show');
first.classList.add('hide-down');
setTimeout(() => first.remove(), fadeTime);
}
setTimeout(() => {
notif.classList.remove('show');
notif.classList.add('hide-down');
}, visibleTime - fadeTime);
setTimeout(() => {
notif.remove();
}, visibleTime);
});
}
function getFormatSize(aspectRatio, status) {
let width = 0;
let height = 0;
if (status === 3) return { width: 0, height: 0 }; // Скрыть
// Форматы
if (aspectRatio >= 1.49 && aspectRatio <= 1.51) { // 3:2
width = status === 2 ? 380 : 310;
height = 55;
} else if (aspectRatio >= 1.32 && aspectRatio <= 1.34) { // 4:3
width = status === 2 ? 430 : 360;
height = 55;
} else if (aspectRatio >= 1.65 && aspectRatio <= 1.67) { // 5:3
width = status === 2 ? 400 : 330;
height = 55;
} else if (aspectRatio >= 1.24 && aspectRatio <= 1.26) { // 5:4
width = status === 2 ? 450 : 380;
height = 55;
} else if (aspectRatio >= 1.77 && aspectRatio <= 1.79) { // 16:9
width = status === 2 ? 370 : 300;
height = 55;
} else if (aspectRatio >= 1.59 && aspectRatio <= 1.61) { // 16:10
width = status === 2 ? 390 : 320;
height = 55;
} else {
width = status === 2 ? 360 : 300; // default fallback
height = 55;
}
return { width, height };
}
function updateNotifySize(status) {
const notifies = document.querySelectorAll('.notify');
const aspectRatio = window.innerWidth / window.innerHeight;
const { width, height } = getFormatSize(aspectRatio, status);
notifies.forEach(notif => {
notif.style.width = `${width}px`;
notif.style.height = `${height}px`;
});
}
// Автообновление при изменении экрана
window.addEventListener('resize', () => {
updateNotifySize(lastStatus || 1);
});
// Alt:V подключение
let lastStatus = 1;
if ('alt' in window) {
alt.on('updateNotifySize', (status) => {
lastStatus = status;
updateNotifySize(status);
});
}
У меня не редага, у меня самописверстай ваще на vw а не на пикселях, для рыги самое то, и ниче адаптивить вручную не надо
Он имел в веду не редагу а rageУ меня не редага, у меня самопис
А понял, но я делаю на alt-v. А сюда обращаюсь тобишь нету нормальных форумов для alt-vОн имел в веду не редагу а rage
Возьми скрипт с редаги. у тебя же карта не статичная, может расширение экрана, может карта в трёх положениях. Может её не быть.
какие форумы) я тебе говорю про верстку, ты можешь верстать через пиксели (px) и верстка не будет адаптивна под другие экраны, если ты у себя сверстаешь худ на 2к монике, он будет норм, но стоит включить 1080x1080 рес, то худ будет огромный. а верстка через vw это фиксит, оно будет адаптировано под экран и нормально выглядетьА понял, но я делаю на alt-v. А сюда обращаюсь тобишь нету нормальных форумов для alt-v
Я это понял, но как сделать чтобы худ подстраивался под формат внутри игры?какие форумы) я тебе говорю про верстку, ты можешь верстать через пиксели (px) и верстка не будет адаптивна под другие экраны, если ты у себя сверстаешь худ на 2к монике, он будет норм, но стоит включить 1080x1080 рес, то худ будет огромный. а верстка через vw это фиксит, оно будет адаптировано под экран и нормально выглядеть
p.s: никто не запрещает адаптивно верстать на пикселях и мб на флексах + медиа запросы, но я лично юзаю vw
Он же ответил на твой вопрос, использование vwЯ это понял, но как сделать чтобы худ подстраивался под формат внутри игры?
Я это понял, но как сделать чтобы худ подстраивался под формат внутри игры?
// сделаешь элементы в центре экрана (то бишь твой контейнер в котором нотифи упадет в центр):
html {
display: flex;
justify-content: center;
align-items: end;
width: 100%;
height: 100%;
}
//или так (вообще не советую прикасаться к этим абсолютам, я в свое время все на них верстал, каждый элемент когда начинал верстать)):
.дивКонтейнераНотифи {
position: absolute;
transform: translate(-50%, -50%);
top: 90%;
left: 50%;
}