Пользователь
0,0
рейтинг
17 мая 2012 в 04:10

Разработка → Самые простые техники адаптивной верстки перевод

HTML*, CSS*
Сайтов с адаптивной разметкой с каждым месяцем становится все больше, заказчики кроме кроссбраузерности все чаще требуют адаптивность, но многие разработчики не спешат обучаться новым техникам. Но адаптивный дизайн — это просто! В этой статье представлено 5 примеров адаптивной разметки различных элементов веб-страниц.




1. Видео (демо)


Очень простой CSS и HTML, и ваше embed-видео будет масштабироваться в соответствии с шириной страницы:

<div class="video">
	<iframe src="http://player.vimeo.com/video/6929537"frameborder="0"></iframe>
</div>


.video {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}
.video iframe,  
.video object,  
.video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


2. Максимальная и минимальная ширина (демо)


Max-width помогает определить максимально возможную ширину объекта. В примере ниже ширина div'а — 800 пикселей при возможности, но не более 90% ширины:

.container {
	width: 800px;
	max-width: 90%;
}


Так же можно масштабировать изображение:
img {
	max-width: 100%;
	height: auto;
}


Такая конструкция будет работать в IE 7 и IE 9, а для IE 8 делаем такой хак:

@media \0screen {
  img { 
  	width: auto; /* for ie 8 */
  }
}


Min-width — противоположность max-width, позволяет задать минимальную ширину объекта. В примере ниже благодаря min-width масштабируется текстовое поле:



3. Относительные значения (демо)


Если в адаптивной верстке использовать относительные значения в нужных местах, можно значительно сократить CSS код страницы. Ниже представлены примеры.

Относительный margin

Пример верстки вложенных комментариев, где вместо абсолютных значений используются относительные. Как видно из скриншота, второй способ гораздо читабельнее:



Относительный размер шрифта

При использовании относительных значений (em или %) шрифта наследуются также относительные значения межстрочного пространства и отступов:



Относительный padding

На скриншоте ниже хорошо видно преимущества относительных значений padding перед абсолютными:



4. Трюк с overflow:hidden (демо)


Можно очистить float от предыдущего элемента и оставить контент внутри контейнера, используя overflow:hidden, что бывает очень полезно в адаптивной разметке. Наглядно — в демо.


5. Перенос слов (демо)


При помощи CSS можно переносить непереносимые текстовые конструкции:
.break-word {
		word-wrap: break-word;
}

Перевод: Nick La
@grokru
карма
407,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (51)

  • +52
    Тема «адаптивная вёрстка», а контент «css для чайников». Спасибо за статью, хочу ещё!
  • –3
    Под заголовок, на мой взгляд, подходит только 4-ый пункт.
    • –1
      Зря минусуете, человек дело говорит.

      Но адаптивный дизайн — это просто!

      К сожалению, все совсем наоборот :-). На первом же более-менее сложном проекте выяснится столько нюансов, что вы серьезно задумаетесь, а нужен ли вам вообще адаптивный дизайн.

      Статья интересная, но практически не имеет отношения к адаптивному дизайну. Для тех, кто хочет узнать, что это такое, лучше прочитать Как сделать один сайт для все устройств.
  • –4
    Советую думать в этом направлении: float, mediaquery, bootstrap.
  • +1
    Еще хотелось бы услышать о применении медиа блоков.
  • +3
    Первая демка стабильно роняет Chrome после пары изменений размеров:
    • 0
      P.S. 18.0.1025.168 m
    • +2
      Windows 7 x64 + Chrome 19.0.1084.46 m
      Никаких падений браузера у себя не обнаружил. Меняю размер, изменяя ширину Developer Tools (который привязан к правой части экрана).
    • +4
      Наблюдаю ту же проблему
    • 0
      у меня только заголовок поинтереснее
    • +1
      согласен. падает плагин Shockwave Flash x32
    • 0
      Ubuntu 12.04 64-bit, никаких падений, всё очень стабильно. Изменял размер окна, HD-режим, всячески поизгалялся над страницей… ничего не упало)
  • –17
    На мой взгляд стоит указать ссылку на источник вашей статьи:
    webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design
    • +1
      Топик оформлен как перевод и ссылка указана рядом с ником автора.
    • +4
      На мой взгляд стоит привыкнуть к редизайну хабра и начать отличать статьи от переводов, ок?
    • +2
      Сколько можно?
  • +3
    Прощу прощенья, не могу привыкнуть в новому дизайну.
  • 0
    Спасибо за пост, но хочется чего-нибудь более изящного.
  • +3
    Это, конечно же, не адаптивная верстка, а обычная резина.
    • НЛО прилетело и опубликовало эту надпись здесь
      • –1
        Очевидно тем, что никакой адаптации верстки здесь нет.
        Верстка в веб — это не статический скриншот, который «волшебным образом» растягивается, как это было бы в печатной верстке. Она изначально подразумевает разметку с параметрами стилизации. Относительные размеры — не адаптация, а только единицы измерения.
        Адаптация, во-первых, учитывает разные устройства (media queries), а во-вторых, подразумевает какое-то изменение в стиле/разметке. Здесь — ни того, ни другого, а только ошибочное мнение автора о том, будто нестатичная верстка в веб значит адаптацию.
        • НЛО прилетело и опубликовало эту надпись здесь
          • +1
            Ох уж эти имхо. Я вам перечислил два условия адаптивности верстки для облегчения классификации. Резина может быть притянута за уши к адаптивной верстке, ровно как iframe remote scripting — к ajax.
            Адаптация однозначно значит не то, что вы написали, и тем более не включает понятия (если это вообще понятия) красивости и пристойности. Адаптация значит изменение, приспособление к сложившимся условиям — откуда и вытекают два требования: изменение стиля/разметки, и учет условий — media queries. В резиновой верстке не стояло и не стоит цели адаптации — это просто способ обозначения размеров. То, что его можно приспособить под адаптацию — хорошо, но это не значит, что он становится адаптацией. Помимо этого, резина не учитывает сложившиеся условия, а также ничего не меняет.
            Если вы хоть минимально дружны с логикой, вы сможете уловить это заключение.
            • +1
              Уж извините за резкость.
            • НЛО прилетело и опубликовало эту надпись здесь
              • +1
                В этом вы правы, но что вы называете версткой? Внешний вид — да, меняется, он типа адаптивный, тексты рендерятся по-другому, блоки соскакивают, но внешний вид — это не верстка, это способ интерпретации верстки браузером. Это адаптивный дизайн. А верстка — то есть разметка (html-код) плюс стилизация (css-код) — не меняются!
                • НЛО прилетело и опубликовало эту надпись здесь
                • НЛО прилетело и опубликовало эту надпись здесь
                  • +1
                    Ну так-то да) Только это все-же отдельный механизм, а) учитывающий условия, б) меняющий CSS, который работает для рендеринга в текущий момент. Типа цифрового автомата, меняющего свое состояние в зависимости от условий media queries.
                    • НЛО прилетело и опубликовало эту надпись здесь
                  • 0
                    Посмотрите на скриншот даже — там поменялось число картинок на мобильном экране. Такое не сделать без техники адаптивной верстки.
                    • НЛО прилетело и опубликовало эту надпись здесь
                      • 0
                        Да, вообще-то вы правы.
                      • 0
                        Хотя не могли бы вы показать пример, как сделать, чтобы три элемента были по 33%, а два элемента — по 50%? Ну т.е. чтобы видимые элементы занимали всю отведенную им ширину?
                        • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    >> Как видно из скриншота, второй способ гораздо читабельнее:
    Очень и очень индивидуально. К тому же причем тут % маржин?
    • НЛО прилетело и опубликовало эту надпись здесь
  • +2
    Кирилл, спасибо за пост.

    Мы у себя практически все это используем. Первый «трюк» с видео вообще очень удобный.
    А вот что касается именно сабжа, то мы подключаем сразу несколько разных css-стилей с атрибутами типа media=«screen and (max-width: 760px)», чем и реализуем адаптивность под разные ширины окон.
  • НЛО прилетело и опубликовало эту надпись здесь
    • НЛО прилетело и опубликовало эту надпись здесь
      • +1
        Этот способ хорош, в том случае если элементы не вылетают из блока. Я думаю можно даже в пост добавить.
        • +2
          <<<< Этот способ хорош, в том случае если элементы не вылетают из блока.
          Не согласен. Если вы внимательно прочитали бы статью, то поняли бы, что при этом способе элементы могут смело вылезать из контейнера, не боясь быть обрезанными. Мало того этот метод решает сразу все проблемы, которые были в предыдущих clearfix'ах и иже с ними.

          <<< Я думаю можно даже в пост добавить.
          А вот тут полностью поддерживаю! Автор, добавьте этот пример обязательно!
          • 0
            На самом деле я неправильно выразил мысль, я говорил про трюк с overflow:hidden.
            • НЛО прилетело и опубликовало эту надпись здесь
        • +3
          Думаю можно не добавить, а заменить. Так как альтернативный способ решает проблему лучше, чем overflow: hidden;
          • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        Очень не хочется огорчать, но в FF 13.0 — блок не переносится
        • 0
          Так же быстро нашлось и решение:
          Блоки обернуть елементом с «float:left»
  • 0
    Где media queries?
    • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Клип напомнил клипы группы Tool

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