Темой этого месяца является адаптивность сайтов, поэтому мы решили подробнее рассказать о том, что такое адаптивный веб-дизайн, зачем он нужен и какие существуют основные принципы адаптивного веб-дизайна.
Адаптивный веб-дизайн - достаточно новое направление в дизайне веб-ресурсов, но уже сейчас он является одним из главных показателей качества сайта. В данной статье мы расскажем о том, что такое адаптивный веб-дизайн и каким он бывает.
Адаптивный веб-дизайн (в английском языке «responsive web design») – это дизайн веб-страниц, обеспечивающий отличное восприятие на различных устройствах, подключенных к Интернету.
Это значит, что один и тот же сайт можно просматривать на самых разных устройствах, независимо от разрешения и формата экрана, – смартфонах, планшетах, ноутбуках и т.д. При этом просмотр будет одинаково удобен для всех форматов – пользователям мобильных устройств, например, не нужно будет расширять отдельные области сайта, чтобы не промахнуться мимо нужной ссылки.
Адаптивный дизайн призван сделать веб-страницы и отображение их содержимого соответствующими тому устройству, с которого они просматриваются.
1) Большое разнообразие устройств, с которых можно выходить в Интернет. В настоящее время существует множество устройств, которыми люди пользуются, в том числе, и для того, чтобы выходить в Интернет. Все эти устройства различаются размером экрана, разрешением и, соответственно, тем, как может отображаться на них веб-сайт. Поэтому важно, чтобы ваш сайт хорошо смотрелся и правильно отображался у любого из пользователей, независимо от того, какое устройство он использует.
2) Популярность мобильных устройств с выходом в Интернет и увеличение мобильного Интернет-трафика. С ростом популярности мобильных устройств количества пользователей, которые заходят с них на сайты, заметно увеличилось, поэтому просто игнорировать их уже нельзя – это не один-два человека в полгода, это значительная часть вашей аудитории, и им должно быть удобно пользоваться вашим сайтом (иначе они не будут этого делать).
3) Срочная информация. Если ваш ресурс содержит новостную / срочную информацию, и высока вероятность, что пользователю может понадобится прочитать эту информацию именно с телефона (потому что других устройств у него под рукой нет) в данный момент времени, нужно позаботиться о том, чтобы у него была возможность это сделать.
Мобильные версии сайтов и мобильные приложения, специально разработанные для различных мобильных устройств, также решают проблему с удобством просмотра сайта, но имеют некоторые недостатки.
1) Под каждый тип операционной системы нужно свое приложение / версия сайта. Это требует дополнительных ресурсов, как временных, так и денежных.
2) Необходимость загрузки приложения. Для того, чтобы пользоваться вашим приложением, пользователям необходимо его загрузить. Это требует каких-то дополнительных усилий от пользователей, и многие не будут этого делать, если точно не уверены, что приложение им очень нужно и они планируют регулярно его использовать.
3) Разделение траффика. С точки зрения продвижения сайта мобильное приложение не удобно тем, что разделяет весь траффик ресурса на траффик сайта и траффик приложения, что будет выглядеть, как меньшая посещаемость сайта.
4) Необходимость интеграции материалов сайта. В случае с мобильным приложением необходимо либо синхронизировать сайт с приложением (дополнительные ресурсы), либо делать двойную работу по наполнению сайта и приложения материалами.
В отличие от мобильных приложений, адаптивный дизайн – это один адрес сайта, один дизайн, одна система управления и содержание сайта.
Безусловно, адаптивный дизайн также имеет свои минусы, главным из которых является относительная новизна технологии и, как следствие, недостаток хороших специалистов и знаний о проектировании адаптивных сайтов.
Проектирование начинается с адаптивной версии веб-сайта для мобильных устройств. На этом этапе дизайнеры стремятся правильно передать смысл и основные идеи с использованием небольшого экрана и всего одной колонки. Содержимое при необходимости сокращают, удаляя второстепенные информационные блоки и оставляя самое важное.
В статье на Хабрахабр представлены основные виды адаптивных макетов, существующие в настоящее время.
Простой в реализации и очевидный для пользователя тип представления сайта. Основные блоки сжимаются до ширины экрана мобильного устройства, где такое невозможно - перестраиваются в одну длинную ленту.
Очевидный способ для многоколоночного сайта: при уменьшении ширины экрана дополнительные блоки (сайдбары) переносятся в нижнюю часть макета.
Этот способ наиболее удобен при чтении сайта с различных устройств: под каждое разрешение экрана разрабатывается отдельный макет. Способ трудоемок, поэтому менее популярен, чем предыдущие два.
Очень простой способ, который подходит для несложных сайтов. Достигается элементарным масштабированием изображений и типографики. Не очень популярен, т.к. не обладает гибкостью.
Способ, пришедший из мобильных приложений, где дополнительное меню может появляться при горизонтальном или вертикальном тапе. Главный недостаток - неочевидность действий для пользователя: очень непривычно видеть мобильную навигацию на веб-сайта. Но со временем способ может стать достаточно популярным.
Нужно помнить, что представленные выше макеты не являются универсальными решениями - для каждого проекта необходимо выбирать наиболее подходящий под нужды и возможности способ.
Приветствую вас, случайные посетители и постоянные читатели блога сайт!
За время существования этого сайта, я менял шаблон несколько раз и даже создавал собственный с нуля.
Одна из главных задач при выборе нового шаблона – это адаптивная верстка сайта под все разрешения экрана.
Краткий план статьи:
В предыдущей статье я уже писал о том, и зачем он нужен. Но как достичь этой самой адаптивности?
Для этого есть разные способы. Кто то использует javascript, кто то что то еще. Но я считаю, что самый простой и правильный способ – это адаптивная с помощью CSS.
Во-первых,
если вы взялись верстать адаптивный дизайн сайта, между тегами
Какой я был дурак, что не сделал этого сразу, когда пытался сделать адаптивную верстку сайта!!!
Проблема мобильных браузеров в их масштабировании верстки сайта, даже адаптивной.
Представьте себе, я рисую дизайн, потом прописываю все нужные стили и запросы, проверяю адаптивность сайта при разных разрешениях. Все вроде бы хорошо! Но, когда я открываю свой блог на смартфоне, я вижу, что сайт просто напросто сжался. Он не адаптировался к мобильному устройству, а просто уменьшились размеры шрифта, картинок и т.д.
Как так? Я стал перепроверять все стили, правильно ли я прописал классы, в итоге дошел до того, что через javascript проверил ширину окна браузера в px. Я был в шоке. При проверке на ноутбуке я получил результат 1024px, и примерно такой же результат я получил открыв сайт на смартфоне!
Но ведь этого не может быть!
Оказывается, если не прописать код, который я указал выше, мобильный браузер не понимает, что сайт адаптивный и пытается просто уменьшить страницу сайта, чтобы она влезла в маленький экран мобильника.
Из-за своей глупости и некомпетентности я потерял очень много времени. Зато теперь запомнил навсегда))).
Чтобы сделать адаптивную с помощью CSS, необходимо использовать media запросы.
Это как? Да, очень просто. В CSS файле нужно прописать запросы типа:
@media screen and (min-width: 1440px) and (max-width: 1599px){ }
Это код означает, что стили заключенные между “{ } ” будут работать для экранов с минимальной шириной 1440px и максимальной 1599px.
То есть те стили элементов сайта, которые должны быть адаптированны в зависимости от разрешения экрана, должны быть прописаны отдельно для каждой возможной ширины экрана.
Именно на эти разрешения и нужно делать упор и уделять им особое внимание при адаптивной верстке. Это самые распространенные виды разрешений экранов.
Очень удобно использовать для создания адаптивной верстки bootstrap. Удобство в том, что все стили для адаптации блоков, кнопок, таблиц и т.д. уже прописаны в bootstpap. Нужно только разобраться какой класс к какому элементу присвоить.
Для начала, качайте свежую версию bootstrap и подключите его к своему сайту. Учтите, что подключение стилей и скриптов к wordpress имеет свои особенности.
Верстка на bootstrap отличается тем, что ширина блока или экрана делится на 12 равных частей. И присваивая определенный класс блоку, можно задать ширину блока равной нужному количеству частей.
Например, такая конструкция позволит выделить один широкий блок для контента шириной в 8 частей и один узкий для сайдбара шириной в 4 части экрана:
Ширина блоков будет рассчитываться автоматически в зависимости от ширины экрана. А при просмотре на мобильном устройстве эти блоки будут смещаться друг под друга.
Также можно регулировать отступ блок от края, опять же, на нужное количество частей. Например такая конструкция:
Будет создан блок шириной в 10 частей с отступом слева в 1 часть экрана.
Если разобраться, то работа с бутстрап делает работу с очень быстрой. При чем эти стили точно работают корректно и не будет ничего кривого на сайте.
В будущем я планирую выложить несколько уроков по работе с bootsrap. Поэтому советую , чтобы не упустить этот момент.
Но возникает вопрос: как проверять адаптивность сайта? Вот прописали вы media запросы в CSS, подключили bootstrap и используете нужные классы. А как вы проверите, что на всех разрешениях экрана сайт правильно адаптируется.
Очень точный и главное бесплатный сервис, который заслуживает уважение и благодарности от веб-мастеров и верстальщиков, которые занимаются адаптивной версткой сайтов.
Ну как вам статья? Все понятно? Если нет, пишите в комментарии, будем разбираться вместе.
Да, чтобы сделать адаптивный дизайн сайта, нужно хорошо потрудится. Но эти труды вознаградятся благосклонным отношением к вашему сайту поисковиков, и самое главное посетителей вашего сайта.
Совсем недавно, буквально 10 лет назад, веб-дизайнеры при создании сайтов ориентировались на определенную среднюю ширину экрана монитора пользователей. Сначала наиболее распространенное разрешение было 800*600, потом выросло до 1024*768. В Интернете можно было встретить такие слова: «Сайт оптимизирован под такое-то разрешение». С увеличением количества размеров экрана стала популярной резиновая верстка сайтов, о которой я писал в Благодаря этому виду верстки можно было просматривать сайты на мониторах с различным разрешением.
Однако в последние годы резиновая верстка перестала быть «панацеей». С одной стороны, появились мониторы с огромными размерами экрана, с другой стороны, произошла мобильная революция – количество подключений к Интернету мобильных устройств (ноутбуков, смартфонов, планшетов) стало больше числа стационарных компьютеров. Мобильный трафик растет, и возникает необходимость корректного отображения сайта на экранах большого числа разнообразных устройств. Интервал размеров слишком велик.
Если же сайт плохо смотрится на маленьких экранах, то посетитель просто уходит с него, падает посещаемость, ухудшаются поведенческие факторы.
Чтобы проверить, как выглядит ваш сайт при просмотре на различных устройствах, можно воспользоваться сервисом Screenfly. Для этого вводите адрес сайта и выбираете из достаточно большого списка желаемое устройство. Это может быть и стационарный компьютер, и планшеты различных видов, и мобильные телефоны. Можно изменить ориентацию экрана с альбомной на книжную и наоборот.
Как же решить проблему нормального отображения сайта на различных устройствах? Выхода здесь два:
Какой из этих вариантов применить, решать, конечно, владельцу или заказчику сайта. Если сайт создан давно, имеет рисованный дизайн, являющийся частью бренда, то, возможно, стоит сделать для него мобильную версию, а старую оставить. Для новых сайтов, конечно, следует выбирать адаптивный дизайн.
Что же это за дизайн и чем он отличается от резинового?
Резиновый шаблон не изменяет свою структуру при изменении ширины экрана, а меняет только размеры. Например, веб-страница имеет три колонки: слева – меню шириной 25% от ширины окна, в центре – контент – 50 %, справа — сайдбар – 25 %. При ширине окна в 1000 px они будут иметь размеры соответственно 250, 500 и 250 px, что вполне нормально. Но если использовать мобильный телефон с маленьким экраном шириной 320 px, то колонки сожмутся до размеров 80, 160, 80 px и станут нечитаемыми.
В чем выход? Он – в кардинальном изменении веб-страницы. Это изменение состоит в том, что после постепенного уменьшения ширины колонок происходит перестроение структуры страницы – она вытягивается в одну колонку. Но это не единственное отличие.
Такой дизайн строится на использовании CSS media queries (медиа-запросы). Благодаря этим запросам вначале определяются параметры устройства, которое использует посетитель, и, в зависимости от этого выбора, подключается соответствующий стиль, то есть при адаптивном дизайне используется один сайт с набором стилей для разных устройств. К примеру, если посетитель заходит на сайт с обычного компьютера, подключается одна таблица стилей, и он видит сайт с большой красочной шапкой, горизонтальным меню, несколькими колонками контента, а при использовании iPada применяется другой стиль, и вместо огромной шапки отображается небольшой логотип, меню превращается в вертикальный список, а контент вытягивается в одну колонку.
Можно ли переделать существующий шаблон сайта под адаптивную версию? Конечно, можно, если вы в достаточной мере владеете HTML и CSS. Но, если вы используете какую-либо систему управления контентом — WordPress, Joomla!, Drupal, то лучше найти готовый шаблон, сейчас адаптивных шаблонов разработано много. Кстати, в моей статье теперь следует добавить еще один пункт «Проверка шаблона на адаптивность».
Итак, можно сказать, что адаптивный дизайн на настоящий момент является наиболее современным способом разработки сайтов и, несмотря на его относительную сложность, за ним будущее. Прогресс не стоит на месте, появляются новые, более сложные устройства, и программное обеспечение к ним тоже усложняется.
Кстати, только что появился уникальный курс Андрея Кудлая . Используя фреймворк Bootstrap, сегодня можно сверстать сайт с красивым, приятным, профессиональным дизайном, при этом не нужно быть профи в верстке. Используя фреймворки, даже самый новичок в сайтостроении способен сверстать страницу, создать одностраничный сайт или лэндинг. Причем сайт будет достаточно профессиональный, а время, затраченное на его создание минимально.
Все это очень серьезно, а чтобы отвлечься, предлагаю пособирать пазлы и посмотреть еще одну картину моего земляка, народного художника России Н. П. Ерышева.
Напишите в комментариях свое мнение по поводу адаптивного дизайна.
Сегодня большинство людей выходят в сеть через мобильные гаджеты - планшеты, телефоны, в связи с этим оптимизация сайта также выходит на новый уровень. Если пользователь заходит и видит, что сайт не оптимизирован для мобильных устройств: изображение невозможно просматривать, кнопки съехали, шрифты маленькие и нечитабельные, дизайн перекошен - 99 из 100%, что он выйдет и начнет искать другой более удобный. А поставит галочку, что ресурс нерелевантен, т. е. не соответствует поисковому запросу. Поэтому дизайн страницы должен быть обязательно адаптирован под различные мобильные устройства. Что такое мобильная версия сайта, как сделать ее, и какой способ лучше применить? Подробнее в этой статье.
Итак, существуют четыре ключевых способа адаптировать сайт под мобильную версию.
Адаптивные шаблоны предполагают изменение картинки сайта в зависимости от размера экрана. Как правило, они задаются на стандартные 1600, 1500, 1280, 1100, 1024 и 980 пикселей. Для реализации применяют Queries. Сам при этом не меняется.
К преимуществам этого способа стоит отнести:
Конечно, адаптивные шаблоны имеют и свои недостатки, которых, к слову сказать, больше, чем достоинств. Тем не менее многие разработчики придерживаются именно этой концепции, например, корпорация Google, мобильная версия сайта которого имеет адаптивный дизайн. Итак, недостатки:
Тем не менее такая мобильная версия сайта быстро, без особых навыков и затрат позволяет адаптировать ресурс к любым гаджетам. Но подойдет она, ввиду перечисленных недостатков, к небольшим, простым ресурсам с минимумом информации и мультимедиа, без сложной навигации и анимации. Для сложного сайта подойдут 2 других способа.
Этот метод очень распространен и часто с успехом делает сайт на мобильном устройстве удобнее для восприятия. Суть его в том, чтобы создать отдельную версию страницы, нарисованную под приложение и расположенную на отдельном URL или поддомене, например, m.vk.com. При этом основной функционал сохраняется, просто иначе выглядит дизайн сайта. Преимущества такого способа налицо:
Но и здесь не обошлось без недостатков:
В целом отдельный мобильный сайт оправдывает себя и является самым распространенным способов адаптации ресурса под мобильные устройства. Он популярен среди крупных интернет-магазинов, например, Amazon.
Поисковик Google активно поддерживает это направление мобильного дизайна. Это самый сложный, затратный, но действенный метод адаптировать сайт под телефон или планшет. Называется он RESS. Это таргетирование ресурса в мобильное приложение, которое можно скачать для каждого устройства отдельно. Для андроида - с GooglePlay, а для Apple - с iTunes.
Такие приложения быстрые, бесплатные, удобные, имеют возможность размещения различных видов информации, при этом память телефона и интернет-траффик не съедаются так, как при посещении сайта через браузер. На них легко заходить, так как ссылка всегда будет на экране под рукой, и нет необходимости вводить сложное название в адресную строку браузера.
Есть, конечно, здесь и свои недостатки, такие как сложность в разработке, высокая стоимость труда большого числа программистов, необходимость делать несколько вариантов верстки. Иногда мобильное устройство не распознается приложением. Необходима регулярная техническая поддержка, исправление недостатков. Тем не менее этот вариант считается лучшим из трех предложенных ввиду своей продуктивной, бесперебойной работы.
Все вышеперечисленные способы предполагают пусть и не всегда длительную и сложную, но все-таки оплачиваемую работу веб-мастера. Если вы не видите острой необходимости в подобной разработке, вам подойдет простая и бесплатная мобильная версия сайта. Как сделать ее проще всего?
Скачайте специальные шаблоны (плагины) для адаптивного дизайна. Например, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile и другие. Они помогут корректнее отображать сайт в телефоне, при этом вы получите несколько подсказок, что следует исправить для лучшей адаптации странички к мобильной версии.
Конечно, данный метод вряд ли подойдет для серьезных ресурсов. Скорее, это бесплатная возможность предназначается для мелких и самых простых сайтов, блогов, новостных лент. Не стоит также забывать, что поисковик Google, так же как и "Яндекс", сегодня предъявляет серьезные требования к мобильным версиям, поэтому есть огромная вероятность понизить свои позиции, используя такой метод.
При таком способе, вероятнее всего, будет обрезаться реклама и всплывающие баннеры, зато страница будет загружаться быстро и без “лагов”.
Неважно, создана мобильная версия сайта бесплатно или с помощью штата веб-мастеров, сделана она на системе RESS или при помощи адаптивного шаблона. Самое главное, что для эффективной ее работы требуется придерживаться нескольких крайне важных принципов. Итак, какой должна быть мобильная версия сайта? Как сделать ее продуктивной, эффективной и производительной?
Минимализм - то, к чему должен стремиться разработчик мобильной версии сайта. Представьте, как тяжело воспринимать информацию, которая пестрит цветами, кнопками, баннерами, и которую приходится бесконечно пролистывать в поисках нужного материала. Мобильный дизайн должен быть простым и чистым. Выберите 2-3 цвета для разделения пространства (например, фирменные). Лучше, если один из них будет белым. Разделите пространство небольшого экрана на понятные и читаемые зоны. Виртуальные клавиши должны быть видны, чтобы пользователь четко знал, куда нажимать, и видел - вот товар, вот форма для заполнения данных, вот информация по доставке и оплате.
Все дополнительные опции, которые пригодились бы в десктопной версии и облегчили бы жизнь пользователю, здесь принесут только сложности. Оставляйте только самые важные элементы. Анимация, рекламные баннеры, мультимедиа, скорее всего, только будут тормозить работу сайта или приложения и отвлекать от главного.
Вопрос выравнивания стоит не менее остро, поскольку если сделать его неправильно, пользователь получит только окончания важных слов. Общепринятым считается выравнивание по левому краю и вертикально. Представьте, как вы пролистываете новостную ленту в телефоне. Вы делаете это сверху вниз, но никак не в левую или правую сторону.
Когда возможности длинной цепочки переходов нет, пробуйте объединять несколько шагов в один. Например, на сайте требуется ввод данных в несколько этапов - имя, затем адрес, где в каждой отдельной ячейке расположены отдельно дом, улица, квартира и т. п. Чтобы не вынуждать пользователя пробовать попасть по множеству мелких ячеек, предложите ему заполнить всего 2 - имя и адрес.
Иногда, наоборот, требуется разъединить слишком большое количество информации. Например, в выпадающем меню у вас перечень более 80 городов, куда осуществляется доставка. Сгруппируйте их по регионам, чтобы пользователю не пришлось пролистывать этот огромный список. Когда он будет наводить курсор на областной центр или область, будет выпадать еще один список городов.
Кстати, по поводу списков. Их два - фиксированный в алфавитном или другом порядке и с подстановкой. Выбор их зависит от того, что будет перечисляться.
Фиксированный удобен в том случае, если пользователь точно знает, что ищет. Например, город, номер или дату. Второй вариант подойдет для длинных сложных названий или для случаев, когда есть множество вариаций у одного и того же названия, а каждый приближает пользователя на шаг к цели. Вариант с автоподстановкой чаще используется в том случае, когда посетителю нужна помощь. Например, сайт по вязанию предлагает купить спицы. Пользователь вводит поисковой запрос “Металлические спицы”, а в подсказке видит “Спицы 5 мм”, “Спицы 4,5 мм” и т. д.
Этот пункт особенно касается сайтов, где что-то продают онлайн, и приходится заполнять стандартные формы оплаты, доставки и т. п. Если человек производит покупку с телефона, то, скорее всего, у него нет времени добраться до компьютера, а значит, процесс покупки нужно сделать максимально быстрым и удобным.
Для этого формы могут содержать уже заполненные данные, можно прибегнуть к самым популярным ответам. Например, вставить сегодняшнюю дату, способ оплаты наличными, город, если вы работаете в одном регионе. Их можно менять, но если вы попадете в цель, время пользователя будет сэкономлено.
Создавая дизайн мобильной версии сайта, помните о том, что у всех телефоны разные, и зрение тоже. Возможно, ваш сайт будет просматриваться с небольшого экрана, поэтому шрифты должны быть простыми и читабельными, кнопки - достаточно большими, чтобы на них можно было нажать и не попасть на другую страницу, а изображения должны открываться отдельно, крупно, особенно если речь идет об интернет-магазине.
Говоря об адаптации сайта к мобильным устройствам, нельзя не прибегнуть к статистике, чтобы понять, как важен этот процесс для продвижения в сети.
Цифры следующие. Сегодня гаджетами пользуются 87% населения, видимо, кроме самых маленьких детей и некоторых людей пожилого возраста. Экономисты прогнозируют рост мобильной коммерции в 100 раз на ближайшие 5 лет. При этом только 21% сайтов адаптирован под работу с мобильными устройствами. Значит, интернет-трафик и рынок электронной торговли занят лишь на малую 5-ю часть.
Вдумайтесь в эти цифры. Имеет ли смысл адаптировать свой ресурс? Конечно да. Более того, пока есть так много свободного места на этом рынке, вы можете занять свой собственный сегмент на нем.
Использовать мобильную версию целесообразно для любой платформы, которая стремится получить высокий рейтинг. Ведь это прямое воздействие на пользователя, создание для него комфортных условий для пребывания на вашем сайте.
Без мобильной версии не могут существовать:
Сегодня мобильные технологии находятся в стадии активного роста и развития, поэтому, стремясь к лидерству на рынке, любая компания должна следить за тем, чтобы ее интернет-ресурс соответствовал требованиям. Из-за растущих запросов пользователя сайты приходится постоянно модернизировать и адаптировать под различные устройства. Понятно, что если человеку неудобно находиться на том или ином ресурсе, он не может там получить информацию о товаре или цене, оформить заказ, узнать о доставке, то он найдет тот сайт, где все это станет возможным. Поэтому, чтобы победить в конкурентной борьбе, важно иметь гибкий, удобный, функциональный и интересный ресурс.
Сделать это поможет мобильная версия сайта Android или Ios. Для этого нужно выбрать один из вышеперечисленных способов редизайна - адаптивный шаблон, создание нового сайта на поддомене и переход к нему путем редиректа, использование бесплатных шаблонов или создание мобильного приложения, с помощью которого пользователь сможет удобнее заходить и находиться на странице.
Сделать адаптивный шаблон сайта достаточно просто, но поддерживать элементы в сбалансированном виде во всех точках изменения шаблона - вот что является настоящим искусством. В данном уроке представлены 5 методов для использования в CSS для адаптивного шаблона. Есть очень простые свойства CSS, такие как min-width , max-width , overflow и относительные значения, но они все играют важную роль в разработке адаптивных дизайнов.
Данный трюк CSS позволяет встраиваемому видео растягиваться до установленных границ.
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%; }
Свойство max-width позволяет устанавливать максимальную ширину элемента. Его надо использовать, чтобы предотвратить расширение элемента за определенные рамки.
В ниже приведенном примере определяется размер контейнера 800px, но устанавливается ограничение по размеру границу 90%.
Container { width: 800px; max-width: 90%; }
Можно сделать изображение с автоматически изменяющимся размером до максимальной величины с помощью свойств max-width:100% и height:auto .
Img { max-width: 100%; height: auto; }
Выше приведенный код для адаптивного изображения работает в IE7 и IE9, но не действует в IE8. Для исправления ситуации нужно добавить свойство width:auto . Можно использовать условное правило CSS специально для IE8 или ниже приведенный трюк для IE:
@media \0screen { img { width: auto; /* для ie 8 */ } }
Свойство min-width противоположно по действию свойству max-width . Оно устанавливает минимально возможную ширину элемента. Ниже приведен пример использования свойства min-width, чтобы поле ввода не становилось слишком маленьким при уменьшении масштаба.
В адаптивном шаблоне использование относительных величин может существенно упростить код CSS и улучшить внешний вид дизайна.
Ниже представлен пример комментариев, в которых относительная ширина левого поля используется для создания отступа в древовидной структуре. Вместо абсолютного значения в px используется процентное значение для следующего уровня в списке. В левой части рисунка видно, что на мобильных устройствах доступного пространства для элементов списка может стать недостаточно для нормального отображения в случае применения абсолютных значений.
С помощью относительных величин для размера шрифта (em или %) можно достаточно просто добиваться соответствующего изменения высоты строк и размеров отступов при адаптации шаблона под размер экрана устройства. Например, размеры всех связанных элементов автоматически изменяются при установке новых размеров размера шрифта для родительского элемента.
Нижеприведенный рисунок демонстрирует преимущества использования относительного значения в % для отступов. Блок слева имеет несбалансированное пространство при применении абсолютных величин в px. Блок справа имеет отличный вид с пропорциональным заполнением содержанием.
Отменить обтекание элемента текстом можно с помощью свойства overflow. Очень простой и полезный способ. Можно отменить обтекание текстом предыдущего элемента и сохранить структуру содержания.
Свойство max-width помогает разместить неломающийся текст (например, длинный адрес URL) в несколько строк вместо одной.
Break-word { word-wrap: break-word; }