html + css + javascript отзывчивый дизайн

Я хочу создать html-страницу, отображающую спидометр. Итак, у меня есть фоновое изображение (спидометр), и внутри него у меня есть несколько кнопок, которые являются другими изображениями. Каждая кнопка выполнена с тегом с IMG внутри:html + css + javascript отзывчивый дизайн

<div id="speedometer"> 
    <a href="button1"> <img id="img1" src="..."/></a> 
    <a href="button2"> <img id="img2" src="..."/></a> 
    <a href="button2"> <img id="img2" src="..."/></a> 
</div

Таким образом, это легко укладывать каждый элемент, используя фиксированное положение, для того, чтобы каждый объект должен быть расположен хорошо.

Но моя цель - иметь динамически изменяемый спидометр. Итак, первое, что я подумал, - это динамически установить размер «спидометра» на 100% ширины экрана, а затем найти правильный процент для положения трех кнопок внутри. Я думаю, что это должно сработать, но я не уверен, что это лучший способ сделать это!

Поскольку я не очень разбираюсь в html/css/javascript, я хотел бы получить какое-то предложение о том, как добиться такого поведения!

Спасибо!

источник

2014-01-18 user3098549

не может сказать слишком много, просто глядя на этот кусок кода, но есть несколько способов сделать это. вы можете использовать относительные значения, как вы сказали, на основе соотношения сторон каждой кнопки по сравнению с основным спидометром. но вам также придется рассмотреть другие элементы на этой странице. другим способом является использование запроса @media и разбивка на несколько ширины экрана, на которые вы нацеливаетесь, 1080p, 720p и т. д. – Godinall

http://stackoverflow.com/questions/19827917/responsive-designing-with-javascript?rq=1 –

Два способа приблизиться к этому.

media queries. Они в основном являются способом объявления ваших правил CSS на основе текущей ширины устройства. Поэтому вам придется пройти и определить правило CSS для каждой ширины, которую вы хотите поддержать. Это часть CSS3 и может потребовать включения нескольких js-библиотек для поддержки старых браузеров. Также рекомендуется включить сброс css, если вы идете по этому маршруту.
Используйте фреймворк, как Twitter Bootstrap. Это в основном структура, которая делает именно то, что я изложил в № 1. Они предоставляют множество очень полезных предварительно определенных классов css и минимального javascript, чтобы включить тип рендеринга, который вы описываете.

источник

2014-01-18 16:35:48 Dave

html + css + javascript отзывчивый дизайн

ответ

Смежные вопросы