Creating Mobile-Optimized Websites Using WordPress. 978 Grid System for Web Design. Как разработать макет под адаптивную верстку? (Блоги Техдизайнер.ру — блог о дизайне: Toxicus) Как сделать один сайт для всех устройств (Responsive Web Design) Вчера была опубликована хорошая статья «Веб-дизайн. Каждому устройству свое представление». Несмотря на неплохие размышления, к сожалению, вывод в ней довольно глупый. А именно: «Нужно определить, какими устройствами могут пользоваться ваши посетители, проработать и создать для этих устройств представление вашего сайта, определить устройство посредством проверки заголовков браузеров, и отправить наиболее подходящее представление.» Почему это глупо Во-первых, никто не сможет предугадать, какими устройствами будут пользоваться ваши посетители. Это скриншот из презентации «Beyond the mobile web by yiibu» (очень рекомендую). Во-вторых, если вы не facebook или yandex, скорее всего, вы не потянете создание и поддержку разных версий сайта для каждого устройства.
Как сделать один сайт для всех устройств Вопросы, которые поднимал автор вышеуказанной статьи, уже довольно давно в цивилизованном мире обдуманы, и, более того, они уже решены. Все это называется «Responsive Web Design» Media queries Ссылки. Самые простые техники адаптивной верстки. 17 мая 2012 в 04:10 Сайтов с адаптивной разметкой с каждым месяцем становится все больше, заказчики кроме кроссбраузерности все чаще требуют адаптивность, но многие разработчики не спешат обучаться новым техникам.
Но адаптивный дизайн — это просто! В этой статье представлено 5 примеров адаптивной разметки различных элементов веб-страниц. 1. Видео (демо) Очень простой CSS и HTML, и ваше embed-видео будет масштабироваться в соответствии с шириной страницы: 2. Max-width помогает определить максимально возможную ширину объекта. Так же можно масштабировать изображение: Такая конструкция будет работать в IE 7 и IE 9, а для IE 8 делаем такой хак: Min-width — противоположность max-width, позволяет задать минимальную ширину объекта. 3.
Если в адаптивной верстке использовать относительные значения в нужных местах, можно значительно сократить CSS код страницы. Относительный margin Пример верстки вложенных комментариев, где вместо абсолютных значений используются относительные. Относительный padding 4.