alt

Когда человеку тяжело,
это часто означает,
что он идёт к успеху.

alt


Подключение медиа-запросов

Категория: Адаптивная верстка Просмотров: 692 Коментариев: 0 Дата: 2017-02-05 Добавил: admin

Подключение медиа запросов

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

Тег <META> viewport - представляет собой элемент, предоставляющий браузеру инструкции о том, как контролировать размеры страниц и их масштабирование.

Без viewport
С viewport

Значение мета тега можно записать двумя способами:

Способ 1:

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Значение width=device-width в мета теге, информирует браузер о том, что область просмотра контента равна ширине экрана мобильного устройства.

Способ 2:

Можно задать данное значение и следующим образом, к примеру: width=480px:

HTML

<meta name="viewport" content="width=480px, initial-scale=1.0">

Так задавать значение не рекомендуется, из-за того, что различные смартфоны могут иметь различную ширину экрана. Поэтому, рекомендуется использовать запись, которая показана в первом варианте. После указания данного мета тега и его значения мы можем спокойно использовать все медиа-запросы в CSS стилях и адаптировать наш сайт. Но для того что бы начать это делать разберемся как указывать (подключать) медиа-запросы к CSS файлу.

1. Способ.

Мы используем один CSS файл и уже в нем подключаем <a href="cсылка на медиа-запросы"> медиа-запросы </a> . В HTML файле подключение CSS файла делается как обычно, внутри тегов <head> и </head>.

HTML

<link rel="stylesheet" href="styles/style.css">

Где styles это название каталога, в котором располагается уже сам файл style.css, в котором мы и делаем медиа-запрос.

CSS

@media screen and (max-width:размер экрана в px)
	{
		
	}


Еще про медиа-запросы можно найти тут.

2. Способ.

В этом способе мы можем использовать много CSS файлов со стилями, которые подключаются только при определённом заданном размере экрана. И так подключается данный файл вот таким образом:

В HTML между тегами <head> и <head> указываем подключение стилей как обычно, через тег <link>.

HTML

<link rel="stylesheet" media"only screen and (max-width:700px)" href="styles/style.css">

Далее указываем атрибут media где прописываем, что only (Все) - screen (возможные значения экрана) - у которых ширина экрана меньше или равна 700px будет применяться файл (style.css) с стилями которые будет содержать этот файл.

3. Способ.

И третий способ, это где наши медиа-запросы подключаются через @import и делается это следующим образом:

CSS

@import url(style.css) (max-width:700px);

И так, что тут происходит: мы указываем импортируемый файл со стилями style.css и затем указываем ширину при которой он будет использоваться. Я рекомендую использовать LINK для удобства, т.к. всегда нужно помнить, что @import нужно всегда размещать в самом верху блока стилей, в противном случае их импорта не произойдет.




Добавить комментарий:


Ваше имя

Текст комментария


Введите буквы с учетом регистра:





Апдейты

Популярное Свежие записи

Облако тегов