Изменить верхнюю позицию на основе ширины%

Question

Я пытаюсь изменить положение навигационной панели в верхней части экрана в зависимости от ширины экрана. Я пробовал в CSS: top: 10%, но это зависит от высоты экрана, а не от ширины.

Есть ли способ получить top: .1 * width?

Answer 1

Я собирался сказать, что нет способа сделать это, но, видимо, в CSS3 с 2011 года у вас есть , которые позволяют размеру относиться к окну просмотра. Например:

img { height: 95vw; } 

должно содержать изображения высотой 95% от ширины окна просмотра. Прочитайте больше; по-видимому, только IE9 поддерживал его на момент написания.

Answer 2

Довольно часто упускают из виду, что процентные свойства элементов в вертикальном направлении относятся к их содержащему блоку width, а не только к горизонтальным.

Это означает, что если вы установили что-то в margin-top:10%;, оно будет иметь верхний запас, эквивалентный 10% от его ширины блока.

Вы можете легко видеть, что in this jsFiddle. Попробуйте изменить размер панели вывода по вертикали и горизонтали, и обратите внимание, какое изменение размера делает внутренний блок перемещающимся вверх и вниз.

Вы можете использовать vw и vh и если ваши цели браузера допускают, я бы рекомендовал. Но если вы не можете их использовать, вам не нужно сразу использовать Javascript. Слишком много людей пишут сразу для Javascript, когда он открывает совершенно новую банку червей (например, что, если браузер изменяет размер?), Особенно если немного творческого использования CSS может вытащить вас из липкого пятна в любом случае.