Адаптивная верстка CSS — новая эра гибкой верстки

Мобильный веб-дизайн имеет множество преимуществ, но только при правильном использовании. Соответствующие методы позволят странице хорошо отображаться на больших экранах, маленьких экранах и маленьких экранах КПК. Однако плохая структура кода будет иметь катастрофические последствия для гибкой верстки. Поэтому нам необходимо найти возможные решения недостатков большинства конструкций потоков.

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

В этой статье мы обсудим проверенные методы создания 100% функциональных адаптивных CSS-макетов и предоставим подробный список других руководств и практик:

Вы также можете обратиться к предыдущим статьям:

1. Фиксированные, гибкие и гибкие макеты: какой из них подойдет вам?
   В этой статье рассматриваются преимущества и недостатки каждого типа планировки. Любой из них можно использовать для создания успешного макета веб-сайта, при условии сохранения его удобства использования;
2. Гибкая планировка: предстоящие задачи
   Обсудить будущие проблемы гибкой планировки;
3. Разрешение экрана и лучший пользовательский опыт
   Знакомство с вопросом разрешения экрана, а затем и персональными скриптами для рядового пользователя.

1. Гибкая компоновка с использованием сетки

Большинство из нас слышали о системе сеток 960 для разработки веб-страниц с фиксированной шириной. Использование системы сеток 960 делает проекты с фиксированной шириной более предпочтительными, чем гибкие макеты. Однако есть способ создать гибкий макет на основе сетки. С технической точки зрения структура кода эластичной верстки отличается от структуры кода гибкой верстки, но она обеспечивает для пользователя почти тот же эффект.

Что такое потоковая компоновка?

Гибкие сетки создаются за счет разумного использования элементов деления, процентов и простых математических вычислений. Эта идея исходит от Итана Маркотта, который признал, что «em» — это улучшение по сравнению с размером шрифта. Здесь мы возвращаемся к этой базовой концепции, но для более полного и подробного понимания этого подхода см. «Плавную сетку», подробное руководство по созданию гибких макетов на основе сетки.

Идея состоит в том, чтобы использовать относительные размеры, комбинировать проценты и em и использовать простые разделения, чтобы найти соответствующую ширину пикселей, которая используется в проектах с фиксированной шириной.

преимущество :

1. Этот подход позволяет вам иметь макет сетки, ширина которого может показаться фиксированной только один раз;
2. Пользователи могут просматривать этот макет, используя предустановленные размеры шрифта и сохраняя их пропорциональный размер;
3. Стили макета совместимы с разными браузерами;
4. Если разобраться, большинство проблем в потоковом проектировании легко исправить.