Описание тега viewport-units

Единицы измерения области просмотра vh, vw, vmin и vmax - это единицы измерения относительно размера области просмотра браузера, введенные в CSS3.
2 ответа

Viewport-unit vw/vh не работают должным образом при не 100% увеличении Safari в OS X

У меня проблемы с vw а также vh устройства на OSX Safari. Возьмите этот код в качестве примера: <body style="margin: 0;"> <div style="background: red; height: 100vh; width: 100vw;"></div> </body> При 100% увеличении работает …
17 авг '16 в 09:59
0 ответов

Как я могу заменить все VH единиц на фиксированные значения пикселей для мобильных устройств?

Мой сайт использует vh Единицы практически для всего: размеры шрифта, позиции, высоты и ширины. Из-за характера моего сайта именно так я решил сделать его адаптивным к различным пропорциям. Проблемы на мобильном телефоне: Программная клавиатура Andr…
2 ответа

VW и VH единицы не являются точными

width: 100vw;/* 100% of viewport width */ height: 100vh;/* 100% of viewport height*/ Этот CSS должен дать мне точные (100%) размеры области просмотра. Но он, очевидно, слишком велик, потому что вызывает переполнение на странице. Это не отступы, поля…
26 апр '15 в 17:55
1 ответ

Могу ли я изменить исходный размер блока?

Я использую vh а также vw единицы для стилизации определенных элементов страницы. Это все работает хорошо, когда исходный содержащий блок и область просмотра имеют одинаковый размер. Вот что говорится в спецификации: Длина области просмотра в процен…
20 дек '18 в 15:43
2 ответа

Блок просмотра VH пересчитывает только при горизонтальном изменении размера (не по вертикали). Хром

У меня есть веб-сайт, который полагается на размеры области просмотра в "скользящих" контейнерах, но после вертикального изменения размера высоты окна не пересчитывается. Горизонтальные и смешанные свитки заставляют пересчитывать vh в правильном пор…
21 окт '13 в 12:42
1 ответ

Текст с использованием блока VW не работает

Я надеюсь использовать единицы VW для определения размера типографии, но при этом текст огромен и явно больше ширины области просмотра. По сути, я хочу, чтобы мой текст был адаптивным в родительском.container, поэтому текст никогда не обрезается и н…
28 сен '16 в 12:24
0 ответов

CSS vmin незначительное отклонение

Итак, у меня есть 2 деления один height:50vmin а другой имеет border-bottom:50vmin solid #000, Теперь они должны быть одинакового "размера", хотя в 50% случаев между этими двумя значениями есть небольшое отклонение: один - 320px, а другой - 320.500p…
30 апр '15 в 20:39
2 ответа

Относительные отступы и единицы измерения vh - ошибка или спецификация?

DEMO Иногда я создаю квадрат (или любой прямоугольник, на самом деле), который будет уважать его соотношение при любом размере, используя метод, подобный этому. Что я хочу: для предотвращения выхода квадрата за пределы области просмотра на устройст…
06 сен '13 в 13:08
0 ответов

Как ребенок масштабирует размер шрифта в зависимости от родителя?

РЕДАКТИРОВАТЬ: ДУМАЮ, ЧТО Я ПОЛУЧИЛ ЭТО С ИСПОЛЬЗОВАНИЕМ iFRAME: https://plnkr.co/edit/X2FQGzxjeDFiYHXlQFFg iFRAME - это собственный порт Я пытаюсь изменить размер шрифта внутри em в зависимости от размера его родительского li. Когда я пытаюсь vw эт…
12 сен '16 в 15:48
1 ответ

Вьюпорт юнитов глючит в iOS 7

Я использую высоту области просмотра, чтобы div получал все области просмотра. Но это не работает в iOS. У меня вместо этого очень длинный div. Вот код: #kapak { height:100vh; width:100%; background-color:#a4d186; }
05 сен '14 в 09:05
1 ответ

Как остановить изменение размера браузера на мобильном телефоне при открытой клавиатуре или исчезновении адресной строки?

Когда адресная строка исчезает на мобильном телефоне или открывается клавиатура, это влияет на размер области просмотра и, следовательно, изменяет любые значения CSS, использующие единицы измерения vh. Есть ли способ убедиться, что единицы vh и vw с…
24 окт '17 в 19:34
2 ответа

Использование "vw" для получения заголовков шириной 100%

У меня есть h1, я хочу разместить по всей ширине области просмотра, которая состоит из 13 символов в моноширинном шрифте. После прочтения статьи " CSS-хитрости" о типографии с размером области просмотра кажется логичным, что если я хочу добиться это…
15 июл '15 в 10:01
1 ответ

Есть ли способ динамически переключаться между vw и vh (ширина / высота области просмотра), используя Javascript/css?

Я пишу адаптивный дизайн, и использование VW для размеров шрифта прекрасно работает. Проблема в том, что vmax еще не поддерживается в webkit, поэтому возникает вопрос: Есть ли способ динамически переключать размеры рендеринга шрифта с использованием…
16 июл '13 в 07:32
2 ответа

Safari CSS правило VH-единиц?

Кто-нибудь знает, есть ли исправление для Safari vh rule? #what{ min-height:70vh; } Все работает нормально, во всех браузерах, но только в Safari это не распознается? Есть ли исправление для сафари, что мы можем использовать правило VH в CSS?
22 апр '14 в 07:07
1 ответ

Ширина окна просмотра CSS не составляет до 100vw

Я создаю ряд <div> элементы, использующие следующий код: HTML: .row_1_element{ text-align:center; font-size:3vw; width:20vw; float:left; } <div id="row_1"> <div class="row_1_element"> Menu </div> <div class="row_1_element"…
19 сен '17 в 23:20
2 ответа

Chrome для Android не правильно отображает VW

Когда я положил <\meta name="viewport" content="width=device-width"/>в коде моего сайта не обновляется 1 vw (ширина области просмотра) после поворота устройства из пейзажа в портрет или наоборот. Например, если у меня экран телефона 640x360, и я …
13 авг '13 в 18:48
1 ответ

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

Итак, я только что обнаружил единицы просмотра, и я действительно хочу их использовать. Первая проблема: у моего элемента "базовый размер" 760x670 пикселей. Я хочу использовать единицы просмотра окна, чтобы увеличить его так, чтобы либо высота 100vh…
02 янв '13 в 00:05
1 ответ

Почему размер шрифта VW не работает в сафари?

Я использую vw в качестве единицы для моего размера шрифта, чтобы он хорошо выглядел при изменении размера браузера. Однако, когда я просматриваю его в Safari, запускается контент, кто-нибудь знает, как это решить? Спасибо CSS .flatNav { background-…
24 июл '14 в 06:00
2 ответа

Преобразование не работает, когда высота родительского элемента установлена ​​в единицах видового экрана

У меня проблемы с вертикальным центрированием. header имеет высоту 100vhи его дочерний элемент, site-infoимеет неопределенную высоту. site-info элемент должен быть вертикально центрирован внутри header, Я попробовал стандарт transform:translateY реш…
1 ответ

Почему не работает в Chrome, но работает в Internet Explorer

Итак, я использую vhи, насколько мне известно, это 1 percent высота просмотра страницы. Это должно работать как проценты, но для границ и, возможно, других вещей. В Chrome, однако, он не работает и оставляет пустое пространство внизу веб-страницы. В…