Руководство для новичков: простой адаптивный сайт при помощи css

Все говорят об адаптивном веб-дизайне. Но значит ли это, что все знают, для чего он нужен?

Респонсивный дизайн – это не только разработка сайтов для мобильных устройств, тут речь заходит об адаптации макетов под различные размеры экрана (viewports).

В этом уроке мы разглядим ключевые принципы, лежащие в адаптивном веб-дизайне, для лучшего понятия данной техники. После этого, мы создадим адаптивный сайт, что будет превосходно масштабироваться на громадных и малых экранах. Респонсивный веб-дизайн стал весьма популярным, в то время, когда все больше людей применяют мобильные устройства, такие как iPhone, iPad, BlackBerry, и планшеты и другие смартфоны с доступом к интернету.

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

Разочарование пользователей

Кое-какие люди считаюм, что сократить функционал и устранить контент, что они вычисляют несущественным, это есть обычным для пользователя. Но как вы имеете возможность быть уверены, что информация, которую вы урезали либо перенесли на вторичную страницу, не есть контентом, что самый важный для меня?!Руководство для новичков: простой адаптивный сайт при помощи css

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

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

  • Во-первых, это действенно наказывает мобильных пользователей, просматривающих сайт.
  • Во-вторых, скрытые стили в CSS, не свидетельствует, что контент не загружается. Это может массово оказать влияние на эффективность, в особенности для тех, у кого нехорошая сообщение.

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

Пошаговое управление

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

Главным элементом гибкости в адаптивном дизайне, есть fluid ширина макета. Все, что вам необходимо сделать, это создать wrapper, content и column widths, каковые будут приспособиться под разную ширину устройств. В этом нет ничего нового, но на данный момент это серьёзнее, чем когда-либо. Дабы не усложнять задачу, мы создадим fluid страницу, складывающуюся из навигации, главного изображения и двух колонок, которая учитывает размещение на устройствах разных размеров.

Мы, кроме этого включили respond.min.js, что разрешает медиа-запросам трудиться в IE6-8.

Главная HTML структура:

Респонсивный сайт Демо

  • Скролл к контенту

Logo

  • Основная
  • Приобрести
  • Сервис
  • Контакты

Технические данные

Открытый автомобиль Mercedes 190 SL именовали кабриолетом из-за трёхместной компоновки салона. Двигатель ставили один — новый четырёхцилиндровый агрегат рабочим количеством 1,9 л. «Четвёрка» оказалась путём отсечения двух цилиндров от рядного мотора родстера 300 SL Gullwing. У двух двигателей однообразный диаметр цилиндра (85 мм), но движение поршня уменьшился с 88 до 83,6 мм.

На «сто девяностом» мотор, оснащённый двумя карбюраторами Solex, выдавал 105 сил и 142 Н•м. Кабриолет (сухая масса — 1160 кг) комплектовался всецело синхронизированной «механикой» с четырьмя ступенями и мог разгоняться до 171 км/ч. Клиентам были дешёвы автомобили как с мягким верхом (цена — $3998), так и с демонтируемым твёрдым ($4295).

Производство в Штутгарте шло с 1955 по 1963 год, а всего был сделан 25 881 автомобиль.

История

История модели Mercedes SL уходит корнями в 1954 год — как раз тогда на автосалоне в Нью-Йорке немцы представили двухдверку Mercedes 190 SL. Имеете возможность себе представить уровень эстетического шока визитёров тогдашнего мотор-шоу. Под кузовом пленительной красоты пряталась укороченная платформа от седана Mercedes W120 Ponton и металлический монокок. Подвеска была полностью свободная — с двухрычажкой спереди и качающимися полуосями позади.

Протяженность — 4290 мм, расстояние между осями — 2400 мм.

CSS

В то время, когда дело доходит до CSS, то установить max-width, будет хорошей идеей, это остановит сайт от масштабирования на огромных экранах, но не будет удерживать от сокращения страниц. Один из главных вопросов при переключении с фиксированной ширины на fluid, это изображения. В CSS, имеется простое ответа данной неприятности.

Легко установите ширину изображения на 100%. Кроме этого добавим auto для высоты изображений, дабы избежать сплющенных изображений в Опере и Сафари на малых экранах:

/* Макет */ #wrapper { width: 96%; max-width: 920px; margin: auto; padding: 2%; } #main { width: 60%; margin-right: 5%; float: left; } aside { width: 35%; float: right; } /* LogoH1 */ header h1 { height: 98px; width: 216px; float: left; display: block; background: url(images/sllogo.png) 0 0 no-repeat; text-indent: -9999px; } /* Навигация */ header nav { float: right; margin-top: 40px; } header nav li { display: inline; margin-left: 15px; } header nav ul li a { text-decoration:none; color:#333;} #skipTo { display: none; } #skipTo li { background: #ccc; } /* Основная картина*/ #banner { float: left; margin-bottom: 15px; width: 100%; } #banner img { width: 100%; height: auto; }

Ваше изображение будет отображаться на его родительском элементе в полную ширину, и будет сжиматься вместе с ним. Лишь убедитесь, что изображения не-width, не превышают большую ширину его контейнера.

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

Переключение основной навигации

Главная причина, из-за чего вам нужно поменять навигацию, это происходящая минимизация, способную привести к нечитаемости и трудности нажатия кнопок. Применяя данный способ, вы облегчите жизнь пользователя. Вы кроме этого имеете возможность подметить в коде, что мы внесли трансформации в #main и aside разделы, для соединения их в одну колонку.

/* Медиа-запросы */ @media screen and (max-width: 480px) { #skipTo { display: block; } header nav, #main, aside { float: left; clear: left; margin: 0 0 10px; width: 100%; } header nav li { margin: 0; background: #ccc; display: block; margin-bottom: 3px; } header nav a { display: block; padding: 10px; text-align: center; }

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

Дабы дать добро медиа-запросам войти в полный эффект, простой мобильный, оптимизированный, респонсивный сайт обязан содержать что-то наподобие следующего:

Cвойство width, несёт ответственность за размер области просмотра. Он бывает установлено на определенное число пикселей, width=960, либо на device-width значение, что есть шириной экрана в пикселях в масштабе 100%. initial-scale свойство руководит масштабом при первой загрузке страницы. maximum-scale, minimum-scale, и user-scalable свойства, осуществляют контроль то, как пользователи смогут масштабировать страницу (больше/меньше).

Высоких конверсий!

Случайные статьи:

Bootstrap: Как создаются современные адаптивные сайты (УРОК)


Подборка похожих статей:

riasevastopol