в css, используя атрибут vmin/vmax при изменении размера страницы

используя новое свойство vmin css, чтобы получить правильный размер шрифта. работает вообще отлично!

div.sample { font-size: 1.5vmin; text-align: center; ... }

проблема возникает при изменении размера страницы. например, если страница уменьшена, font-size не изменится, что приведет к беспорядку.

во-первых, должен ли браузер обрабатывать это?

во-вторых, как лучше с этим справиться? кажется, что если я использую триггер для установки font-size, то мне нужно будет знать значения размера шрифта в javascript, а также css, создавая ситуацию, обреченную на неудачу.


html css resize viewport-units
person cc young    schedule 22.02.2013    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Похоже, что vmin ведет себя в Firefox.

Вот jsfiddle, который я сделал для тестирования: http://jsfiddle.net/noahcollins/Sc8gm/

Похоже, вы видите проблему в хроме? Как указал Базз, существует ошибка Chrome, которая все еще не устранена. Я смог воспроизвести это на Канарских островах. статья CSS Tricks может помочь вам обойти это с помощью javascript, если вы так наклонный.

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

person Noah C    schedule 22.02.2013

arrow_upward
1
arrow_downward

Предположительно, это известная ошибка, как указано в CSS-Tricks. У них также есть обходной путь javascript, посмотрите здесь под заголовком «Ошибки!»:

http://css-tricks.com/viewport-sized-typography/

обходной путь, предложенный CSS-Tricks

Чтобы решить эту проблему (разрешить изменение размера без обновления страницы), вам нужно вызвать «перерисовку» элемента. Я использовал jQuery и просто возился со значением z-index каждого элемента (неуместного в данном случае), которое вызывает перерисовку.

causeRepaintsOn = $("h1, h2, h3, p");
$(window).resize(function() {
    causeRepaintsOn.css("z-index", 1);
});
person Bazzz    schedule 22.02.2013

arrow_upward
0
arrow_downward

vmin — хорошая идея для мобильного веб-дизайна, но поддержка браузеров ограничена. Кроме того, существующая поддержка браузера ведет себя странно. Например, поскольку vmin вычисляет размер шрифта как функцию текущего размера экрана, когда вы фокусируетесь на элементе ввода текста, у вас будут проблемы, потому что иногда размер текста будет изменяться в зависимости от гораздо меньшего окна, которое у вас есть с клавиатура открыта. Так что время от времени ваш ввод текста будет спонтанно становиться крошечным, что невероятно раздражает. Поэтому я рекомендую использовать vw, чтобы поддерживать размер текста в зависимости от ширины экрана. Это обеспечивает лучший пользовательский опыт. vh имеет ту же проблему, о которой я говорил выше.

person nik    schedule 17.10.2013