Как сделать так, чтобы горизонтальное содержимое JS уменьшалось с px до%
Это сводит меня с ума: у меня есть небольшой jquery, который скользит три деления по горизонтали.
Изменить 3:Живая демоверсия; полный сайт, показывающий, как я хочу, чтобы это работало..до тех пор Я получаю менее 775 пикселей. Пожалуйста, измените размер окна, чтобы увидеть, что я имею в виду.
РЕДАКТИРОВАТЬ, по многочисленным просьбам. Что я хочу: На маленьких экранах, скажем, от 700 и ниже. Я хочу одну панель, чтобы заполнить экран. Вовремя.
2-е редактирование:Он отлично работает на уровне выше 700px. Ниже этого; Я бы хотел, чтобы на экране отображалась только одна панель за раз, и при желании (щелчок по текущей панели) следующая панель будет сдвигаться вбок. То есть Нет сложенных столбцов, что является классическим адаптивным дизайном. Пожалуйста, смотрите Fiddle. Это все хорошо, пока вы не свернете окно браузера или не используете мобильное устройство.
Я определяю panel1 и panel2 какfixed widthи используйте css calc, чтобы держать третью панель на уровне 100% минус panel1 (200px) и panel2 (200px):(calc 100% - 400px)
Это работает нормально, пока я не спущусь на маленькие экраны. Затем он выходит из строя: панели укладываются друг на друга вертикально (я хочу скрыть панели неактивными), и из-за фиксированной ширины I "увидеть" крошечные кусочки сплющенных панелей справа. В идеале я хочу, чтобы каждая панель заполняла маленькие экраны на 100%.
Что мне нужно помочь с этим:
Я должен либо
найти способ заменить это JS определение расстояния скольжения пикселей до% var margins = {
panel1: 0,
panel2: -200,
panel3: -400,
}
... и, следовательно, быть в состоянии сделать мой расчет CSS (100% - 20%) или что-то в этом роде.
... или, по крайней мере, найти способ скрыть панели, когда на маленьких экранах.Все указатели очень ценятся.