В этой статье будет рассказано то, без чего не возможна адаптивная верстка, т.е. без свойства тега viewport. Благодаря этому тегу окно просмотра изменяется в зависимости от устройства, и будет меньше на мобильном телефоне, чем на экране компьютера. Если раньше все страницы были рассчитаны только для компьютеров и имели статический дизайн и фиксированный размер, то сейчас требуется адаптировать страницы под все мобильные устройства, т.е. под их размеры экранов.
Тег <META> viewport - представляет собой элемент, предоставляющий браузеру инструкции о том, как контролировать размеры страниц и их масштабирование.
Значение мета тега можно записать двумя способами:
Способ 1:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Значение width=device-width в мета теге, информирует браузер о том, что область просмотра контента равна ширине экрана мобильного устройства.
Способ 2:
Можно задать данное значение и следующим образом, к примеру: width=480px:
<meta name="viewport" content="width=480px, initial-scale=1.0">
Так задавать значение не рекомендуется, из-за того, что различные смартфоны могут иметь различную ширину экрана. Поэтому, рекомендуется использовать запись, которая показана в первом варианте. После указания данного мета тега и его значения мы можем спокойно использовать все медиа-запросы в CSS стилях и адаптировать наш сайт. Но для того что бы начать это делать разберемся как указывать (подключать) медиа-запросы к CSS файлу.
1. Способ.
Мы используем один CSS файл и уже в нем подключаем <a href="cсылка на медиа-запросы"> медиа-запросы </a> . В HTML файле подключение CSS файла делается как обычно, внутри тегов <head> и </head>.
<link rel="stylesheet" href="styles/style.css">
Где styles это название каталога, в котором располагается уже сам файл style.css, в котором мы и делаем медиа-запрос.
@media screen and (max-width:размер экрана в px)
{
}
Еще про медиа-запросы можно найти тут.
2. Способ.
В этом способе мы можем использовать много CSS файлов со стилями, которые подключаются только при определённом заданном размере экрана. И так подключается данный файл вот таким образом:
В HTML между тегами <head> и <head> указываем подключение стилей как обычно, через тег <link>.
<link rel="stylesheet" media"only screen and (max-width:700px)" href="styles/style.css">
Далее указываем атрибут media где прописываем, что only (Все) - screen (возможные значения экрана) - у которых ширина экрана меньше или равна 700px будет применяться файл (style.css) с стилями которые будет содержать этот файл.
3. Способ.
И третий способ, это где наши медиа-запросы подключаются через @import и делается это следующим образом:
@import url(style.css) (max-width:700px);
И так, что тут происходит: мы указываем импортируемый файл со стилями style.css и затем указываем ширину при которой он будет использоваться. Я рекомендую использовать LINK для удобства, т.к. всегда нужно помнить, что @import нужно всегда размещать в самом верху блока стилей, в противном случае их импорта не произойдет.
CSS
Nic_o_Las, 2018-08-25
# 71
Доброго времени суток,
у Вас очень хорошая статья, но вы забыли добавить ссылку к тут - в п. “Еще про медиа-запросы можно найти - тут”
Если смотреть в код, то можна увидеть ошибку в ссылке.
Но в целом статья очень полезная - спасибо.