Некоторые вещи, которые вы должны знать при работе с единицами измерения

Некоторые вещи, которые вы должны знать при работе с единицами измерения

От автора: Дэвид Чейнин написал обобщенную статью с кратким изложением проблемы, связанной с установкой значения height элемента в 100vh в мобильных браузерах и последующим размещением чего-то внизу.

Посмотрите на изображение ниже:

Проблема в том, что Chrome не учитывает адресную строку, когда определяет, как сжимать элемент, что приводит к тому, что нижняя часть элемента оказывается фактически вне нижнего края окна просмотра.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Можно ожидать, что эта кнопка на изображении будет видимой (при условии, что этот элемент находится в верхней части страницы, и вы не прокручивали ее), поскольку она расположена вдоль нижнего края элемента 100vh. Но она на самом деле скрыта в мобильных браузерах, включая iOS Safari или Android Chrome.

Я использую часто это:

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Вы могли бы подумать, что проблему решит body { height: 100% }, но и здесь есть подводные камни. body — это потомок html, который имеет такую же высоту, что и его содержимое, как и любой другой элемент.

Если вам нужно, чтобы body занимал всю высоту, вам также нужно иметь дело с элементом HTML:

… что не так уж сложно.

Сложно расположить вещи вдоль нижнего края. Это проблематично из-за контейнера position: absolute; внутри «полной высоты» (который часто выше окна просмотра).

Если вы попытаетесь разместить что-то вроде фиксированной панели навигации в нижней части экрана, вы, вероятно, сделаете это с, помощью position: fixed; bottom: 0; и это, кажется, работает нормально. Адресная строка сместит это вниз, как и следовало ожидать.

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

В нашем последнем обзоре списков пожеланий CSS улучшение обработки единиц измерения на основе окна просмотра упоминалось несколько раз, поэтому разработчики явно заинтересованы в том, чтобы иметь более эффективные решения для этих вещей. Я не уверен, что это будет означать для веб-совместимости, потому что изменение способа их работы может нарушить все обходные пути, которые мы использовали ранее, и которые, безусловно, все еще работают в наших проектах.

Автор: Chris Coyier

Источник: https://css-tricks.com

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

CSS3. Основы

Прямо сейчас изучите CSS3 с нуля!

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий