Как сверстать резиновый сайт?

Question

[Osco]

Есть простой сайт (см. скрин) нужно сделать чтобы он выглядел одинаково хорошо на всех экранах и устройствах (кроме IE-хоть тут заказчик сжалился)...



Всё что в зеленой рамке должно выглядеть на всех экранах одинаково от 320 до 1200px.
(Задаваться вопросом что курил дизайнер-не будем)

Сложность в том, что ссылки красным цветом (6,02; 1,40 и т.д.) - это тайминг/воспроизв./пауза музыкальных треков.
Фон решено было сделать svg растянуть и отцентрировать с помощью background-position: center center;
background-size: cover; А ссылки сделать блоками в надежде на то что они останутся на своих местах при изменении размера (наивный...).
Наверное проще посмотреть мой сырой вариант верстки.
Относительные единицы были выбраны с привязкой к ширине экрана VW.

Собственно вопрос на миллион-правильную ли тактику я выбрал или есть способы реализовать это проще, удобнее, чтобы блоки с таймингом были зафиксированы на своих местах и не плавали как г.... в проруби?

Comments

[Сергей delphinpro]

Найти шрифт (вижу, что он у вас уже есть).
Вывести туеву хучу элементов с цифрами.
Некоторые — ссылки.
Эти элементы обернуть во флекс контекст с враппингом.
Все остальное - fixed в области просмотра.

Answer 1

[Stalker_RED]

Чем плохо менять данные таймеров скриптом прямо в SVG?

document.querySelector('#maintimer').textContent = '5`55'

Answer 2

[Osco]

Да запихнуть всё в SVG-это хорошая идея, но столкнулся с проблемой:

Как ни пытался не хочет срабатывать скрипт по клику на ссылку для воспроизведения музыки...Речь даже не о тайминге, пробовал через OnClick простейший скрипт-всё работает, "предустановленный" же плеер на js не хочет. В js не силен, помогите разобраться, если в 2х словах тяжело объяснить-готов скинуть на пиво и чипсы)))

Пробовал разные вариации, засунул плеер в

<defs><audio id="player1"  preload="auto">
<source src="mp3/1.mp3"/></audio></defs>

в SVG, в нем же прописывал скрипт, не желает он срабатывать.

Сайт всё там же