В этом мануале вы узнаете, как правильно, а точнее, как можно используя параметры @media в подключение стилистики CSS, где можно самостоятельно изменять стиль отображения веб страницы под каждое устройство под разные разрешение по ширине. Которые можно непосредственно подключить в код страницы.
Появилась возможность для подключение нужного или заданного стиля, который изначально зависит от решение или ширины мобильного экрана. То здесь для удобства работы со стилистикой нужно под каждое мобильного устройства прописывать свой стиль.
Изменяем стиль CSS для media устройств с разным разрешением экрана по ширине.
Код
<link rel="stylesheet" media="screen and (min-width:768px) and (max-width:991px)" href="style.css" />
Вашему вниманию самый распространенный вариант подключения стилей, где добавляем в HEAD кода:
Код
<link rel="stylesheet" href="http://ВАШ_САЙТ.РУ/style.css" type="text/css" media="all" />
Также есть второй вариант, где нужно подключить с помощью импорта ( @import) листа стилей в HEAD:
Код
<style type="text/css"> @import url("style.css") screen, projection; </style>
Также есть возможность для установки диапазона ширины экрана на которые будет задействован определенный стиль.
Код
<link rel="stylesheet" href="style.css" @media="(max-width: 799px) and (min-width: 300px)"/>
