/*Изменения в настройке сетки при ширине экрана более от 480 до 800 пикселей (ПЛАНШЕТЫ)*/
@media screen and (min-width: 480px) and (max-width: 800px) {
selector1 {...}
selector2 {...}
selector3 {...}
...
}
/*Изменения в настройке сетки при ширине экрана менее 480 пикселей (СМАРТФОНЫ)*/
@media screen and (max-width: 479px) {
selector1 {...}
selector2 {...}
selector3 {...}
...
}
/*Настройки сайта при печати на принтере*/
@media print {
selector1 {...}
selector2 {...}
selector3 {...}
...
}
/*Настройки фонов для ретинового экрана*/
@media (min-resolution: 144dpi),
(min-resolution: 1.5dppx)
{
...
}
<meta name="viewport" content="width=device-width, initial-scale=1"><meta name="format-detection" content="telephone=no">
// Запрет на маштабирование страницы:
content="minimum-scale=1, maximum-scale=1, user-scalable=0"
(min-width: 1200px) - DESKTOP;
(max-width: 600px) - TABLET;
(max-width: 350px) - MOBILE;
Почему пропадает часть бэкграунда при уменьшении экрана?
Не задана минимальная ширина для резинового блока (1) с фоном.
Такое возникает, если блок (2), внутри него, больше ширины окна браузера, в этом случае заполняется фоном только видимая часть внешнего блока (1). Т.к. его размер расчитывается от границ окна браузера.
Нужно добавить:
Значение, естественно, нужно указать ваше..block_1{
min-width: 1170px;
}
<link href="css/desktop.css" rel="stylesheet" media="(min-width:768px)">
<link href="css/tablet.css" rel="stylesheet" media="(min-width:481px) and (max-width:767px)">
<link href="css/mobile.css" rel="stylesheet" media="(max-width:480px)">
@import url(css/base.css); /* без медиазапроса, для всех */
@import url(css/medium.css) (min-width:481px) and (max-width:768px);
@import url(css/small.css) (max-width: 480px);