alt

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

alt


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

Категория: Адаптивная верстка Просмотров: 12428 Коментариев: 4 Дата: 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 нужно всегда размещать в самом верху блока стилей, в противном случае их импорта не произойдет.




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


Ваше имя

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


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





Nic_o_Las

Nic_o_Las, 2018-08-25

# 71

Доброго времени суток,
у Вас очень хорошая статья, но вы забыли добавить ссылку к тут - в п. “Еще про медиа-запросы можно найти - тут”
Если смотреть в код, то можна увидеть  ошибку в ссылке.
Но в целом статья очень полезная - спасибо.

Admin

Admin, 2018-09-13

  #71
Nic_o_Las, 2018-08-25

# 72

Доброго времени суток,
у Вас очень хорошая статья, но вы забыли добавить ссылку к тут - в п. “Еще про медиа-запросы можно найти - тут”
Если смотреть в код, то можна увидеть  ошибку в ссылке.
Но в целом статья очень полезная - спасибо.

Спасибо за отзыв! Ссылку поправил Спасибо!

Николай

Николай, 2019-06-25

# 77

Здравствуйте! 
Почему последующий медиазапрос перебивает предыдущий?  Вроде всё делаю по науке:
@media only screen and (min-width: 320px) {...}
Подключение в html: <link rel=“stylesheet” media “only screen and (max-width:320px)” href=“styles/320.css” />

  Как только подкючаю на 480 px, 320 px перестаёт работать.  Что не так в моём коде?

Admin

# 78

Здравствуйте! 
Почему последующий медиазапрос перебивает предыдущий?  Вроде всё делаю по науке:
@media only screen and (min-width: 320px) {...}
Подключение в html: <link rel=“stylesheet” media “only screen and (max-width:320px)” href=“styles/320.css” />

  Как только подкючаю на 480 px, 320 px перестаёт работать.  Что не так в моём коде?

Добрый день!

Я использую метод подключения файлов как описано в 1м случае, у вас же я думаю, возникает конфликт между запросами.


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


Как я думаю, Вы объединили 2й и 1й способ подключения файлов.


Если Вы хотите применить такую структуру записи запросов, применяйте 1й способ подключения файла. Если же 2й метод, то создайте еще один такой же файл для 480px и в нем задайте запрос для этого экрана.

Апдейты

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

Облако тегов