С чего начинается верстка
Несмотря на то, что статья посвящена теме об адаптации, мы кратко расскажем, как вообще начинается разработка сайта. Независимо от того, работаете ли Вы на denwer или просто решили сверстать на компьютере связанные между собой html страницы — надо подойти к вопросу с правильной стороны. И так, у нас есть или создаем папку www. В нее помещаем новую папку с названием проекта, допустим, site1.
Эта папка — временно наш сайт. Открываем ее и создаем файлы:
- папку img — в ней мы будем хранить изображения;
- файл index.html — здесь будет верстка;
- файл style.css — наша будущая таблица стилей.
Содержание файла index.html
Приступим к верстке, каждый сайт, каждую страницу сайта можно начинать кодом:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Заголовок страницы</title>
<!-- Подключаем шрифт -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500" rel="stylesheet">
<!-- Подключаем таблицу стилей -->
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<!-- Шапка сайта -->
<header>
<nav></nav>
</header>
<!-- / Шапка сайта -->
<!-- Основное содержимое -->
<article>
<h1></h1>
</article>
<!-- /Основное содержимое -->
<!-- Боковая колонка -->
<aside></aside>
<!-- /Боковая колонка -->
<!-- Подвал сайта -->
<footer></footer>
<!-- /Подвал сайта -->
</body>
</html>
Подключить шрифт подобным образом — не грех, для начинающих это самый простой вариант. Заходите на сайт fonts.google.com и выбираете нужный Вам шрифт, он автоматически сформирует ссылку на его подключение.
Конечно, наполнение файла index.html может незначительно отличаться, например, не потребуется использовать боковую колонку, уже дорабатываем для себя.
В данный момент, нас интересует тег viewport.
Тег viewport
Этот мета-таг отвечает за масштабирование элементов на странице, выглядит он следующим образом:
<meta name="viewport" content="параметры_атрибута">
Тег может принимать следующие параметры:
- width — устанавливает ширину области viewport. Может принимать как целочисленное значение в пикселях, так и значение device-width
- height — устанавливает высоту области viewport. Принимает целочисленное значение в пикселях или значение device-height
- initial-scale— задает коэффициент масштабирования начального размера viewport. Значение 1.0 задает отсутствие масштабирования
- user-scalable — указывает, может ли пользователь с помощью жестов масштабировать страницу, принимает значение «no/yes»
- minimum-scale — задает минимальный масштаб размера viewport. Значение 1.0 задает отсутствие масштабирования
- maximum-scale — задает максимальный масштаб размера viewport. Значение 1.0 задает отсутствие масштабирования
Для того, чтобы браузер начал воспринимать адаптивность, подстраивался под размер устройства, достаточно написать:
<meta name="viewport" content="width=device-width">
