Комментарии 22
Судя по соотношению ответов, скажу за всех — «Спасибо»!
Спасибо, очень позновательно. Даёшь больше рецептов!
vh, vw — очень не хватало!
=) эх HTML уже не тот что был раньше, сейчас как то все уж через чур просто, если знаешь такие фитчи.
Раньше решал всякие логические задачи, выстраивал блок схемы где что будет, думал как правильней.
Сейчас просто сидишь и бездушно тыкаешь по клавишам.
Не понятно либо опыт за эти десять лет прибавился, либо HTML уж очень просто стал, а может то и другое…
Раньше решал всякие логические задачи, выстраивал блок схемы где что будет, думал как правильней.
Сейчас просто сидишь и бездушно тыкаешь по клавишам.
Не понятно либо опыт за эти десять лет прибавился, либо HTML уж очень просто стал, а может то и другое…
Попробовал vw на смартфонах — из-за Pixelratio (iPhone -2, Galaxy S4 — 3) весь смысл теряется.
Например:
Galaxy S4 экран 1920х1080, но pixelRatio = 3. В результате симулируется экран 360х640.
vw же считается от оригинального разрешения — получается 1vw = 10 физических пикселей.
В общем, текст превращется в «нитку».
Например:
Galaxy S4 экран 1920х1080, но pixelRatio = 3. В результате симулируется экран 360х640.
vw же считается от оригинального разрешения — получается 1vw = 10 физических пикселей.
В общем, текст превращется в «нитку».
НЛО прилетело и опубликовало эту надпись здесь
В общем, работает с размерами элементов, а вот с размером шрифта — нет. Получается, шрифт в 1vw получает размер 4 px, а должен приблизительно 11. При этом масштабирование, в отличие, например, от задания ширины элемента, не происходит. В итоге размер шрифта составляет 4 физических пиксела, без масштабирования.
В общем, мне кажется прблема масштабирования шрифта осталась пока нерешенной.
Например, Retina имеет коэффициент 2, то есть реально вместо 2560 пикселей мы видим 1280.
Все бы ничего, но вот у меня на 15 дюймах 1920Х1080. При этом коэффициент масштабирования равен 1.
Как результат, подавляющее большинство сайтов с их любимыми 13 px (в моем случае должен был быть 19px) просто невозможно читать. В свою очередь при масштабировании у многих дизайн расползается:
ну и картинки
Проверил apple сайт: установил масштаб 200% (Pixelratio — 2)
Сначала грузятся обычные картинки, потом еще раз грузятся Х2 — тройной траффик.
А что будет с новыми дисплеями? Сегодня уже есть на рынке 3840Х2160 в 15 дюймах с PixelRatio 1
У меня картинка 320 на сайтах — полное УГ, а что будет там?
В общем, мне кажется прблема масштабирования шрифта осталась пока нерешенной.
Например, Retina имеет коэффициент 2, то есть реально вместо 2560 пикселей мы видим 1280.
Все бы ничего, но вот у меня на 15 дюймах 1920Х1080. При этом коэффициент масштабирования равен 1.
Как результат, подавляющее большинство сайтов с их любимыми 13 px (в моем случае должен был быть 19px) просто невозможно читать. В свою очередь при масштабировании у многих дизайн расползается:
ну и картинки
Проверил apple сайт: установил масштаб 200% (Pixelratio — 2)
Сначала грузятся обычные картинки, потом еще раз грузятся Х2 — тройной траффик.
А что будет с новыми дисплеями? Сегодня уже есть на рынке 3840Х2160 в 15 дюймах с PixelRatio 1
У меня картинка 320 на сайтах — полное УГ, а что будет там?
Даже если ничего нового не узнаешь очень полезно напомнили что все поддерживается и можно смело использовать. Спасибо!
В том-то и дело, что масштабирование работает, если задать в vw ширину элемента, например. Тогда все нормально: 10vw -> 10% от экрана -> 36px.
А вот высота шрифта получается в физических пикселах. Т.е. 1vw = 3.6px -> 0.33%.
При эмуляции в Chrome, например, на десктопе, этот эффект не отлавливается.
А вот высота шрифта получается в физических пикселах. Т.е. 1vw = 3.6px -> 0.33%.
При эмуляции в Chrome, например, на десктопе, этот эффект не отлавливается.
>К примеру, можно очень удобно задавать размеры шрифта:
Приведите пример практического использования. Желательно не абстрактный, со ссылкой. Не могу себе представить ситуацию, когда прыгающий при ресайзе окна текст — это хорошо.
Приведите пример практического использования. Желательно не абстрактный, со ссылкой. Не могу себе представить ситуацию, когда прыгающий при ресайзе окна текст — это хорошо.
Пример показан на gif-ке) Конкретные сайты на ум не приходят, но вы наверняка видели сайты с гигантским текстом на главной, или с инфографикой. Вот для них такое свойство вполне подойдет: текст будет плавно масштабироваться, вместо того, чобы преноситься.
Немного поздновато, но всё же… Я сейчас делаю веб приложение с интерфейсом как у Win8 — плитки с KPI показателями, которые можно делать любого размера (например если число или текст плохо видно, то надо плитку растянуть). Раньше я делал это через jQuery.fittext(), а вот после прочтения статьи захотелось переделать =). К сожалению кинуть пруф не могу — политика компании…
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Голые пятницы #1