<MyRusakov.ru />

Вёрстка сайта с нуля

Вёрстка сайта с нуля

Это уникальная информация по созданию страниц любой сложности. Вы узнаете всё, что нужно по HTML и CSS, а также увидите множество примеров по вёрстке страниц. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены! Пройдя данный курс, Вы сможете верстать страницы с любым по сложности дизайном. Помимо курса, Вы получите Бонус, который расскажет, как заработать на вёрстке сайтов.

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Что такое адаптивная верстка?

Что такое адаптивная верстка?

Всем привет! Думаю, что многие из вас слышали о такой вещи как "Адаптивная верстка" или "Responsive makeup"(отзывчивая верстка). Сегодня я немного введу вас в курс дела, а в следующих статьях мы будем углубляться в эту тему.

Итак, что подразумевает под собой слово "отзывчивая"? Отзывчивая верстка - это верстка, которая автоматически подстраивается(адаптируется) под то разрешение устройства, на котором в данный момент просматривает страницу пользователь. К примеру, если вы смотрите страницу на большом экране или даже телевизоре, то у вас будет одно отображение сайта, а если вы просматриваете ту же страницу на, к примеру, мобильном устройстве, то у вас будет уже совсем другой вид данной страницы.

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

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

Узнать все это лучше в видео формате и для этого есть курc HTML5 и CSS3 с Нуля до Гуру, но, если вы предпочитаете читать, а не смотреть, то подписывайтесь на обновления, чтобы не пропустить новый выпуск по данной, очень интересной теме.

Итак, начнем.

Для начала нам нужно узнать, что же входит в понятие "адаптивная верстка"? А в данное понятие входит следующее:

  • Гибкие шрифты
  • Гибкий макет на основе сетки
  • Гибкие изображения
  • Медиазапросы

Теперь поговорим поподробнее обо все этом.

Гибкие шрифты - это шрифты, которые заданы не жестко в px(пикселях), а в em, величине, которая может меняться.

Посмотрим на простой пример

body {
  font-size: 16px;
}

h1 {
  font-size: 1.5em;
}

Что мы здесь указали? Я не просто так написал для тега body размер 16px, ведь это именно тот размер шрифта, который принят по умолчанию в браузерах. Теперь нам нужно, опираясь на данное значение, указать размер шрифта в 24px для заголовка h1. Как это сделать? А очень просто! Для этого есть формула

цель / контекст = результат

Запомните эту формулу, она нам еще пригодится.

Нам нужно получить размер шрифта 24px, верно? - это будет наша цель.

У нас шрифт установлен по умолчанию - 16px - это контекст.

Считаем: 24 / 16 = 1.5

Т.е. размер для h1 будет 1.5em.

Итак, с этим разобрались.

Едем дальше и поговорим о гибкой сетке.

Как понятно из названия, гибкая сетка - сетка, которая может изменяться. Для чего это нужно? К примеру, на большом мониторе мы можем показать пользователю 3 колонки, но ведь на мобильном устройстве ему будет неудобно смотреть 3 колонки! Если человек зашел с телефона, то надо оставить одну колонку и всего этого добиться нам помогут гибкие сетки. О них мы будем подробно говорить в отдельной статье. Сейчас я могу сказать лишь то, что там вместо px мы будем использовать %.

Гибкие изображения - очень важная и на самом деле нетрудная тема.

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

И последнее - медиазапросы.

Медиазапросы - это условия, которые либо выполняются, либо не выполняются.

К примеру, мы можем задать ширину колонки 500px, но, если ширина области просмотра пользователя меньше 300px, то ширину колонки нужно установить в 100px.

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

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

Спасибо за внимание и не пропустите следующую статью!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.