Доверьте продвижение нам

Lion Digital Agency

интернет-маркетинг

теги:

Категории

Рубрики

Написание постов, ведение соц сетей Ваших компаний. Формирование имиджа и контента.

от 22900 

Настройка и сопровождение рекламного кабинета Яндекс Директ.

от 14000 

Услуги SEO копирайтера под ключ. Пишем качественные тексты.

от 950 

Как работать с media в css

Media Query — это инструмент в CSS, который позволяет управлять стилями в зависимости от характеристик устройства, на котором отображается веб-страница. Например, вы можете изменить расположение, размер и цвет элементов на странице в зависимости от размера экрана устройства.

Вот пример использования Media Query:

/* стили для устройств с шириной экрана менее 768 пикселей */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    h1 {
        font-size: 24px;
    }
}

/* стили для устройств с шириной экрана более 768 пикселей */
@media (min-width: 768px) {
    body {
        font-size: 16px;
    }
    h1 {
        font-size: 36px;
    }
}

В этом примере определены два Media Query, один для устройств с шириной экрана менее 768 пикселей, а другой для устройств с шириной экрана более 768 пикселей.

Каждый Media Query начинается с @media, после которого следует условие запроса (в данном случае max-width и min-width). Затем определяются стили, которые будут применяться к элементам на странице в случае, если выполняются условия запросов.

В первом Media Query для устройств с шириной экрана менее 768 пикселей, изменен размер шрифта для body на 14 пикселей, а для заголовка h1 — на 24 пикселя.

Во втором Media Query для устройств с шириной экрана более 768 пикселей, размер шрифта для body увеличен до 16 пикселей, а для заголовка h1 — до 36 пикселей.

Media Query может быть использовано для других характеристик устройства, таких как ориентация, плотность пикселей, и т.д.

Media Query также может быть использовано в сочетании с другими CSS-свойствами, такими как display, position, и т.д., для создания адаптивных макетов, которые будут работать на разных устройствах.

Поделиться:

Комментарии

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Задать вопрос

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.

Меню

Оставить заявку

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.