Установка размеров с помощью единиц vw и vh

http://snook.ca/archives/html_and_css/vm-vh-units
  • Перевод
В CSS3 появились новые единицы измерения. (Я, кажется, уже говорил об этом.eng) Вы уже слышали о px, pt, em и новых rem. Давайте рассмотри еще несколько: vw и vh.

Часто в макете есть элементы, которые гарантировано должны умещаться во вьюпорт браузера. В общем случае для этого используется JavaScript. Проверям размер вьюпорта и изменяем размеры элементов соответствующим образом. Если пользователь изменяет размер окна браузера, то процедура повторяется.

С помощью vw/vh мы можем устанавливать размер элементов относительно размера вьюпорта. Единицы vw/vh интересны тем, что 1vw — единица равная 1/100'ой ширины вьюпорта. Что бы присвоить элементу ширину, равную ширине вьюпорта, например, надо установить width:100vw.

Как это можно использовать


Лайтбоксы — прекрасный кандидат для использования vw и vh, так как обычно позиционируется относительно вьюпорта, однако мне кажется, что position:fixed со значениями top, bottom, left и right использовать проще, так как можно вообще не устанавливать высоту и ширину.

Можно использовать новые единицы измерения для установки размеров элементов, которые находятся в нормальном потоке. Например, я могу разместить на странице скриншоты. Высота этих скриншотов не должна превышать высоту вьюпорта. Для этого я могу установить максимальную высоту изображений:

img { max-height:95vh; }

В данном случае я устанавливаю высоту 95vh что бы оставить немного места вокруг, когда они на экране.

Поддержка браузерами


Если rem поддерживаются почти всеми основными браузерами включая IE9, то с использованием vw и vh стоит повременить. На данный момент их поддерживает только Internet Explorer 9.

Ссылки


Спецификацияeng

Единицы vm


По совету gd666 решил немного дополнить.
Есть еще одна единица измерения, связанная с вьюпортом, о которой не упомянули в оригинале статьи. Это vm.

vm рассчитывается относительно ширины или высоты вьюпорта, в зависимости от того, что из них меньше. Меньшая из величин равна 100 vm. При изменении размеров вьюпорта соответствующим образом изменяються размеры, заданные в vm.

Про нее можно прочесть в спецификации.eng
Поделиться публикацией
Ой, у вас баннер убежал!

Ну, и что?
Реклама
Комментарии 50
  • +20
    Один х… заставят на работе для ie6 писать…
    • +4
      Да ладно. Сколько у вас по статистике пользователей реально из под ie6 ходит то?
      Бывают конечно случаи когда поддержка ie6 — обязательна и безоговорочна, сам недавно над таким проектом работал, но и обзор этот не презывает к тому, что бы немедленно бросаться его где то применять. Скорее наоборот. Еденицы пока можно посмотреть в работе только в IE9. Стоит просто запомнить, что такое есть. И со временем, когда оно станет актуальным для всех основных браузеров — начать использовать.
      • 0
        А какая разница? Пренебречь IE6+IE7+IE8 всё равно не получится, разве что в админке.
        • 0
          IE6 — получается легко, исключая специфические случаи.
          IE7 — уже довольно часто игнорируется.

          Кроме того, мягкая деградация — вполне рабочий подход.
          Я думаю, что отсутствие тенюшки или скругленного уголка это лучше, чем метры избыточной разметки и килобайты экспрешеннов.
          Для vh/vw это не актуально, естественно, но в целом css3 вполне свободно позволяет использовать, если от css-правила не зависит, собственно, лаяут страницы.
          • 0
            Я понимаю, я имел в виду именно нововведения 9-ки. Рассчитывать на них получится ой как нескоро; ещё и из-за WinXP, между прочим.
            • 0
              Этот перевод интересен скорее тем, что рассказывает: «такое есть».
              Применять на практике эти единицы мы будем еще ой как не скоро, но знать о них стоит.
              То, что есть имплементация в IE9 радостно по той причине, что эти единицы можно предварительно «пощупать».

              p.s. Я бы их и в админке не рискнул пока использовать. Хотя бы потому что предпочитаю в админках ориентироваться на webkit. Он пока явно более интересен.
      • +18
        Может быть хватит писать комментарии про верстку под ie6?
        • –7
          Пока жив XP, жив и ie6
          • –4
            в обычных версиях при установке он по умолчанию стоит, где то я слышал что microsoft планирует в виде помощи Африке поставлять XP бесплатно, эх…
          • +2
            Действительно, давайте писать про IE7 и IE8 в режиме совместимости.
            Они ещё долго будут в разных ТЗ светиться.
            • 0
              Может быть хватит писать верстку под ie6?
              • +2
                Пока клиент по каким то причинам заявляет поддержку ie6 как обязательную (часто причины, кстати, вполне объективны) и готов за нее платить, то почему бы не верстать под ie6?

                Давайте не будем делать из технологии культа. Для каждого проекта есть свои уникальные условия и обстоятельства из которых и надо исходить. Другой вопрос, когда вы видите что клиент требует чего то совершенно бессмысленного то стоит ему пояснить, что это именно бессмысленно. Ну и естественно, если нужна верстка на ie6 то это влияет на стоимость проекта. Клиент должен это понимать.
              • 0
                или сделать комментарии про ie видимыми только в ie (:
              • 0
                Меня не заставят :)
              • 0
                Вещь, думаю, полезная… но пока мы прийдем к тому что css3, как и html5 будет поддерживаться всеми браузерами… не скоро, ой не скоро, а жаль…
                • +4
                  html5 поддерживается всеми браузерами, просто ie6,7,8 приходится скармливать code.google.com/p/html5shim/
                  Все последние, вполне комерческие, проекты — html5 и css3.
                  Уже больше года, вообще то.
              • 0
                Немного удивлён фактом, что IE опередил всех по части поддержки стандарта.
                • +10
                  Я боюсь они сейчас хватают по верхам то из одного модуля спецификации, то из другого, а потом мы будем безумно радоваться особенностям поведения нашей версточки в ie9.
                  Впрочем, поживем — увидим.
                  • +1
                    Самым больным вопросом в этом плане для IE так и остаётся проблема отсутствия вменяемого механизма автообновлений браузера, потому разработчики вынуждены учитывать что конкретная версия IE умеет, а чего не умеет.
                    • +1
                      Не столько отсутствие самой системы автообновления, она как раз вполне имеет место быть, сколько низкая динамика выхода новых версий.
                      Хотя должен признать что ребята из MS стараються. Это радует, такими темпами через пару лет мы получим вполне топовый браузер.
                      • +2
                        Ага, если бы при этом MS убил все свои остальные невменяемые браузеры, а пока они сами умрут придется ждать больше чем пару лет. А вот пользователи альтернативных браузеров в большинстве способны самостоятельно обновить браузер, иначе бы они не были пользователями альтернативных браузеров :)
                        • 0
                          Пользователи всяких корпоративных порталов, написанных на каком-нибудь ActiveX, работающем только под ie6/7, не одобряют ваш комментарий.
                          PS: Chrome обновляется вообще в фоне, юзер даже часто и не знает о смене версии; Firefox сам предлагает обновиться («Нажми сюда и подожди немного»), про Оперу не в курсе — не пользовался со времён диалапа =) А IE может обновляться через Windows Update, который у нас 95% народа выключает, дабы не забанило ключ. Как, впрочем, и во всём. Через ж… Ну вы поняли.
                          • 0
                            Это вы говорите про обновления под win, под linux вообще об обновлениях задумываться не нужно, там одной командой/кликом можно обновить весь софт саму систему тоже, а если использовать ролинг дистр, то этот софт будет еще и всегда самым свежим (Arch Linux в моем случае).
                            • 0
                              Ну, раз мы говорим про Internet Explorer, то логично предположить что я имею ввиду Windows :)
                              А про линукс да, согласен…
                    • 0
                      А с другой стороны люди требуют чтобы уже были вебсокеты, WebGL и прочее… Люди итак за 1.5 года сделали почти все к чему другие шли 3 — 4 года. Куча мелочей — которые греют душу — типо HTMLElement. И хрен с ним с ХТМЛ5. Браузер теперь развивается постоянно — без перерыв годами.

                      Но вот разве угодишь всем?)

                      Механизм обновления в 9 точно такой же как например в ФФ. После выхода 10 версии в 9 появится окошко “вышла новая версия — она быстрее …… Желаете обновиться?”
                      • 0
                        «она продлит жизнь нам и нашим индусским друзьям, желаете обновиться?»

                        В сравнении с другими областями в плане удовлетворения базовых потребностей (связь клиент-сервер по однозначному и вменяемому транспорту, нормальные custom-аттрибуты у DOM и т.д.) веб-технологии развиваются как черепахи на костылях :(
                    • 0
                      Он всегда «опережал» конкурентов по стандартам, вводимым MS.
                      Качество и своевременность нововведений оставим за скобками — оно сильно разное.
                    • +1
                      почему 100, а не 120?
                      • +1
                        И правда, логичнее было бы, если бы 1 vw/vh/vm равнялся ширине/высоте/минимальному измерению вьюпорта.
                        • 0
                          Возможно сочли, что с дробными будет работать менее удобно или решили не рисковать работать с дробными и использовать integer?
                          Усли честно, это не принципиально, на мой взгляд.
                          • 0
                            Суть в том, что в спецификации CSS уже есть работа с дробными числами от нуля до единицы. А вот чтобы параметр изменялся от 0 до 100 я не помню. Такое только в фильтрах для IE было.
                            • 0
                              Как точно отобразиться скажем такая величина прозрачности 0.01? А 0.005?
                              Зарекаться не стану, но думаю выбор «процентоподобной» системы связан с тем, как браузеры работают с float.
                              В опере, если не изменяет память, вообще феерические баги были. Правда точнее сходу не воспроизведу.

                              Но на самом деле все это попытки гадать на кофейной гуще. Можно поискать в соответствующих рассылках материалы, посмотреть заметки в самой спецификации — возможно что то проясниться.
                              Кроме того никто не гарантирует, что ситуация не изменится. У нас есть только одна имплементация в нерелизной версии браузера и статус модуля, если не путаю, working draft.
                              • 0
                                В опере долго плевались (а модет и до сих пор плюются) на то, что она не понимает доли процентов «25,2%» будет интерпретировано как «25%». Сам не в курсе, так как никогда не было нужно, но все ж-таки некрасивый баг.
                                А происходит он из-за того, что авторы Оперы, как видно, думали, что проценты всегда будут целыми. Так же и тут, кто-то может подумать, что значение vh может быть только целым.

                                В то время как 1.0 однозначно интерпретируется как float. Браузеры с float работают отлично.

                                >> Как точно отобразиться скажем такая величина прозрачности 0.01? А 0.005?
                                По вашему, было бы лучше если бы opacity менялось от 0 до 255?
                                • 0
                                  По моему, совершенно не важно в каком диапазоне изменяется значение, если это изменение корректно работает. Хотя, конечно, в связи с тем, что естественной для людей является десятичная система исчисления, то 1 или 100 субъективно удобнее, чем 256.
                              • 0
                                от 0 до 100 изменяются проценты, и они были в CSS с самого начала
                          • 0
                            И вообще, почему эти негодяи не ввели в качестве единицы измерения 1 tenshi а придумали какие то дурацкие vw и vh?!
                          • 0
                            Если rem поддерживаются почти всеми основными браузерами включая IE9


                            Правда? А вот тут сказано, что только IE9 и Fx3.6+. Chrome и Opera уже поддерживают?
                            • 0
                              Не сказано.
                              В этом ресурсе указано, что только Trident(IE9) их держит.
                              Иными словами этой опции еще нет.)
                            • +1
                              Кажется такие единицы помогут решить проблему с пересчетом величин в дробных процентах.
                              • +2
                                Есть ещё vm — минимальное значение из высоты или ширины вьюпорта, т.е. такое значение, которое гарантирует, что сторона с значением 100vm точно влезет во вьюпорт. Поддерживается только в IE9.
                                • 0
                                  Ага. Есть, но автор статьи про нее не счел нужным упомянуть, почему то.
                                  Я тоже не очень понял почему.
                                  Но в спецификации, на которую я сослался в конце статьи все есть, так что если кто то поинтересуется — сможет ознакомиться.
                                  • 0
                                    Или думаете стоит явно преписать в конце статьи что такое есть и стоит посмотреть?
                                    • 0
                                      Да. Они идут одним пакетом и очень странно, что про один забыли.
                                • 0
                                  Я не понял, чем эти новые единицы лучше процентов?
                                  • 0
                                    Тем, что это размер вьюпорта.
                                    Не body, не родительского контейнера, а именно вьюпорта.
                                    А еще тем, что ты можешь получить рамеры вьюпорта вне зависимости от размера и значения position родителя.
                                    • –1
                                      Всё равно излишняя хреновина на мой взгляд.
                                  • 0
                                    Тем, что это размер вьюпорта.
                                    Не body, не родительского контейнера, а именно вьюпорта.
                                    А еще тем, что ты можешь получить рамеры вьюпорта вне зависимости от размера и значения position родителя.

                                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                    Самое читаемое