Единицы просмотра, сохраняя соотношение сторон?

Итак, я только что открыл для себя единицы просмотра, и я действительно хочу их использовать.

Первая проблема: мой элемент имеет «базовый размер» 760x670 пикселей. Я хочу использовать единицы области просмотра, чтобы масштабировать его так, чтобы либо высота была равна 100vh, либо ширина была равна 100vw, в зависимости от того, что меньше.

К сожалению, хотя я могу использовать 100vmin для получения меньшего из двух, я могу применить его только к ширине или высоте, а не к обоим.

В настоящее время я использую:

#root {
    width: 760px;
    height: 670px;
    width: 100vw;
    height: calc(670vw/760);
}

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


css viewport viewport-units
person Niet the Dark Absol    schedule 02.01.2013    source источник
comment
Я тестирую в Chrome. Кажется, что vw юнитов нельзя использовать внутри calc. Я пробовал такие вещи, как height: -webkit-calc(100vw/3). Единственными другими браузерами, которые поддерживают как calc, так и единицы просмотра, являются IE10 и Safari 6, ни один из которых не может быть установлен на моей платформе (Windows 7).   -  person Šime Vidas    schedule 02.01.2013
comment
Кстати, это должно быть возможно с медиа-запросами, так как вы можете разветвлять код на основе соотношения сторон, например. @media all and (min-aspect-ratio: 760/670) { ... }.   -  person Šime Vidas    schedule 02.01.2013
comment
Это ошибка WebKit. Так что забудьте о Chrome/Safari. Firefox/Opera даже не реализуют единицы просмотра. Кажется, что IE10 — единственный браузер, который понимает ваш код. :)   -  person Šime Vidas    schedule 02.01.2013
comment
@ŠimeVidas Вы могли бы дать хороший ответ на эти два комментария.   -  person Pavlo    schedule 19.01.2013
comment
@PavloMykhalov Я заставил это работать в IE10. Ответ ниже. :-)   -  person Šime Vidas    schedule 20.01.2013

Ответы (1)


arrow_upward
11
arrow_downward

Я заставил это работать в IE10:

#elem {
    width: 100vw;
    height: calc((9/16)*100vw);
}

@media (min-aspect-ratio:16/9) {
    #elem {
        height: 100vh;
        width: calc((16/9)*100vh);
    }
}

Текущая демонстрация http://jsfiddle.net/C2ZGR/show/ (открыть в IE10 ( предварительная версия доступна для Windows 7); затем измените размер окна, чтобы ширина или высота были очень маленькими)

Я использовал элемент с соотношением сторон 16:9, но код может работать для любого соотношения сторон — просто замените 16/9 и 9/16 на желаемое соотношение сторон.

Кстати, IE10 — единственный браузер, в котором эта демонстрация будет работать. Firefox/Opera еще не реализуют единицы области просмотра, а браузеры WebKit в настоящее время имеют ошибку, из-за которой единицы области просмотра нельзя использовать внутри calc().

person Šime Vidas    schedule 19.01.2013