Как выровнять элементы на фоне на адаптивном сайте

0

Я работаю над отзывчивым сайтом http://www.pegasuswd.com/mountain-climb/, в котором много графических элементов. Один элемент - это набор маркеров, которые появляются вдоль пути в дизайне. в любой момент времени на пути может быть от 1 до 100 маркеров в случайных местах, установленных через css. Проблема в том, что по мере того, как сайт масштабируется, маркеры сдвигают позиции и больше не следуют по пути. Маркеры идеальны около 1450 х 850 пикселей. (Они удаляются с шириной 700 пикселей).

Я ищу способ сохранить их на пути всех размеров. Я думаю, что здесь требуется решение jQuery для определения высоты и сброса маркеров вдоль пути, но я не уверен. В идеале я хотел бы сделать это с помощью CSS. Есть ли у кого-нибудь рекомендации или указатели на то, как сохранить маркеры на пути, пока сайт масштабируется?

Теги:
responsive-design

2 ответа

1

Без написания миллиардных медиа-запросов (только для CSS) я действительно вижу только пару способов сделать это:

  • включают маркеры в горном изображении
  • использовать JavaScript и прослушивать событие изменения размера окна и соответственно корректировать местоположения маркера
0

Вот возможное решение с использованием JS, предоставляемое: Возможно ли динамически масштабировать размер текста на основе ширины браузера?

Вместо того, чтобы использовать пиксели для создания всего в вашем контейнере, подумайте о переходе на ems. Первоначально дайте свой контейнер для всего, что нужно изменить размер font-size: 100%; , После преобразования всех размеров в em вместо px, следующий JS будет регулировать размер каждого элемента, используя em пропорционально, сохраняя все выровненное и, в конечном счете, делая его полностью отзывчивым.

$( document ).ready( function() {
            var $body = $('#container'); //Cache this for performance

            var setBodyScale = function() {
                var scaleSource = $body.width(),
                    scaleFactor = 0.35,                     
                    maxScale = 600,
                    minScale = 30; //Tweak these values to taste

                var fontSize = scaleSource * scaleFactor; //Multiply the width of the body by the scaling factor:

                if (fontSize > maxScale) fontSize = maxScale;
                if (fontSize < minScale) fontSize = minScale; //Enforce the minimum and maximums

                $('body').css('font-size', fontSize + '%');
            }

            $(window).resize(function(){
                setBodyScale();
            });

            //Fire it when the page first loads:
            setBodyScale();
        });

Ещё вопросы

Сообщество Overcoder
Наверх
Меню