Я работаю над отзывчивым сайтом http://www.pegasuswd.com/mountain-climb/, в котором много графических элементов. Один элемент - это набор маркеров, которые появляются вдоль пути в дизайне. в любой момент времени на пути может быть от 1 до 100 маркеров в случайных местах, установленных через css. Проблема в том, что по мере того, как сайт масштабируется, маркеры сдвигают позиции и больше не следуют по пути. Маркеры идеальны около 1450 х 850 пикселей. (Они удаляются с шириной 700 пикселей).
Я ищу способ сохранить их на пути всех размеров. Я думаю, что здесь требуется решение jQuery для определения высоты и сброса маркеров вдоль пути, но я не уверен. В идеале я хотел бы сделать это с помощью CSS. Есть ли у кого-нибудь рекомендации или указатели на то, как сохранить маркеры на пути, пока сайт масштабируется?
Без написания миллиардных медиа-запросов (только для CSS) я действительно вижу только пару способов сделать это:
Вот возможное решение с использованием 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();
});