Media Screen CSS в адаптивной верстке

    Один комментарий 2249

Пришло время разобраться, что такое Media Screen в CSS3 и как это применять в своих проектах. Это так называемые Медиа-запросы CSS, с помощью которых можно адаптировать элементы дизайна под разные размеры экранов. Например можно скрыть определенный блок на мобильных и наоборот показывать его только на широких экранах (десктопах). Как я с этим столкнулся. На клиентском сайте логотип на мобильных съезжает вправо, на компьютерах он наоборот слева. Была поставлена задача написать текст, который будет показан слева от лого на маленьких экранах. На больших его быть не должно. На выручку как раз и пришли медиа-запросы Media Screen CSS. Я знаю, что многие из вас очень любят, когда им показывают наглядно, поэтому приготовил пример.

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

Итак, у нас есть страница, на которой есть шапка с картинкой и блок с контентом черного цвета на желтом фоне.


Для начала в head нужно добавить такую строчку:

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

CSS код сейчас такой:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

#header{
	height:120px;
	position:relative
	padding:5px;
}
#content{
	background:#fff000;
	padding:5px;
}
p {
    padding: 5px;
}	
 .txt {
    font: 65px Verdana bold;
    position: relative;
    top: 16px;
    color: #fff;
    left: 80px;
   }
img{
     margin:5px;
}

Ставим пред собой задачу на экранах шириной меньше 1000 px изменять цвет текста, фона, покрасить шапку, сместить значок вправо, а слева от него будет появляться надпись. И выглядеть это будет вот так:

То есть мы произведем кардинальные изменения на странице средствами Media screen CSS. Для этого пишем те самые медиа-запросы, которые будут определять ширину экрана девайса и выдавать тот или иной вид.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

 @media screen and (max-width: 1000px) {
#header {
	background:#543567; /* Красим шапку */
	}
   }
 @media screen and (min-width: 1000px) {
 .txt {
      font: 25px Verdana bold; /* Показываем заголовок */
      position:relative;
      top; 15px;
      left: 30px;
      display:none;	
	}
   }
@media screen and (max-width: 1000px) {
#content {
	 background:#657493; /* Меняем цвет текста и фона содержимого */
	 color:#fff;			
	}
   }
@media screen and (max-width: 1000px) {
    img {
	float:right; /* Смещаем логотип вправо */			
	}
   }

Более подробно можно посмотреть код демонстрационной страницы и самостоятельно разобраться что к чему.

Демо

Изменяйте ширину окна браузера, чтобы увидеть изменения. В Хроме есть функция просмотра на разных устройствах.

Клавиша F12 Фактически в Media screen CSS мы создаем новые правила, которые вступят в силу только при определенных условиях. В данном случае, если дисплей будет меньше или равен 1000 px. Если будет больше, то ничего меняться не будет.

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

1

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

Можно так же взять готовые стили из Bootstrap CSS и подогнать под свой дизайн.

Любая сумма на развитие сайта

Категории: Уроки   Тэги: CSS пример

html — только экран HTML5 и CSS @media и

спросил

Изменено 10 месяцев назад

Просмотрено 1к раз

Я пытаюсь вставить только экран @media и (максимальная ширина: 600 пикселей) но ничего не происходит. Я пробовал что-то простое, чтобы посмотреть, работает ли оно, меняя фон, но ничего.

Нужно ли мне что-то писать в HTML, чтобы это работало??

 **{
    box-sizing: граница-коробка;
}
Только экран @media и (максимальная ширина: 600 пикселей) {
    тело {
      цвет фона: голубой;
    }
  }
тело{
    цвет фона: желтый;
}**

Даже пытался, но это внизу, но ничего…

  • html
  • css
  • медиа-запросы
3

Возможно, вы не видите изменений из-за специфики правил.

То есть так, как у вас написано:

 @media только экран и (max-width: 600px) {
  тело {
    цвет фона: голубой;
  }
}
тело {
    цвет фона: желтый;
}

Оба они имеют одинаковую специфичность, то есть отображается правило last .

Таким образом, даже если размер экрана ниже 600px , будет отображаться цвет фона : желтый .

Вместо этого вы должны определить правило запроса без мультимедиа сначала , затем следует правило медиа-запроса , второе .

Попробуйте это:

 тело {
  цвет фона: желтый;
}
    
Только экран @media и (максимальная ширина: 600 пикселей) {
  тело {
    цвет фона: голубой;
  }
}

Медиа-запрос должен быть написан после свойства, которое вы собираетесь сделать отзывчивым. В этом случае сначала вы пишете код для тела, а затем медиа-запрос.

Это пример 

 тело {
    цвет фона: желтый;
}
Только экран @media и (максимальная ширина: 600 пикселей) {
    тело {
        цвет фона: красный;
    }
}

В дополнение к другому ответу в этой теме вам может потребоваться включить важный тег для тела в ваш медиа-запрос. Он должен будет переопределить основные стили тела выше.

Таким образом, это должно выглядеть следующим образом:

 тело {
    цвет фона: желтый;
}
Только экран @media и (максимальная ширина: 600 пикселей) {
    тело {
        background-color: светло-голубой!важно;
    }
}

Вышеупомянутое означает, что ваше тело будет иметь фоновый цвет желтый на устройствах с шириной БОЛЬШЕ , чем 600 пикселей, а фоновый цвет тела будет голубым на устройствах с шириной МЕНЬШЕ , чем 600 пикселей.

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.

Использование медиа-запросов — CSS: каскадные таблицы стилей

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

  • Для условного применения стилей с помощью CSS @media и @import at-правила.
  • Для таргетинга на определенные медиафайлы для