Css media screen max width: CSS3 Media Queries — Examples

Media Queries медиа запросы CSS уроки для начинающих академия

❮ Назад Дальше ❯

CSS Media запросы-больше примеров

Рассмотрим еще несколько примеров использования медиа-запросов.

Мультимедийные запросы — это популярный способ доставки адаптированной таблицы стилей к различным устройствам. Чтобы продемонстрировать простой пример, мы можем изменить цвет фона для различных устройств:

Пример

/* Set the background color of body to tan */
body {
  background-color: tan;
}

/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}

/* On screens that are 600px or less, set the background color to olive */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

Вы удивляетесь, почему мы используем именно 992пкс и 600px? Это то, что мы называем «типичными точками останова» для устройств. Более подробную информацию о типичных точках останова можно прочитать в руководстве по адаптивному веб-дизайну.

Запросы мультимедиа для меню

В этом примере мы используем мультимедийные запросы для создания адаптивного меню навигации, которое изменяется в дизайне на разных размерах экрана.

Home Link 1 Link 2 Link 3

Small screens:

Home Link 1 Link 2 Link 3

Пример

/* The navbar container */
.topnav {
    overflow: hidden;
    background-color: #333;
}

/* Navbar links */
.topnav a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* On screens that are 600px wide or less, make the menu links stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .topnav a {
        float: none;
        width: 100%;
    }
}

Запросы носителей для столбцов

Обычное использование мультимедийных запросов — это создание гибкого макета. В этом примере мы создаем макет, который варьируется от четырех, двух и полной ширины столбцов, в зависимости от различных размеров экрана:

Большие экраны:

Средние экраны:

Малые экраны:

Пример

/* Create four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Совет: Более современный способ создания макетов столбцов — использование CSS Flexbox (см. пример ниже). Тем не менее он не поддерживается в Internet Explorer 10 и более ранних версиях.

Чтобы узнать больше о модуле макета гибкой коробки, прочитайте нашу главу CSS Flexbox.

Чтобы узнать больше о адаптивном веб-дизайне, прочитайте наш отзывчивый веб-дизайн учебника.

Пример

/* Container for flexboxes */
.row {
  display: flex;
  flex-wrap: wrap;
}

/* Create four equal columns */
.column {
  flex: 25%;
  padding: 20px;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    flex: 50%;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }
}

Скрытие элементов с помощью запросов мультимедиа

Другим распространенным использованием мультимедийных запросов является скрытие элементов на различных размерах экрана:

Я буду скрыта на маленьких экранах.

Пример

/* If the screen size is 600px wide or less, hide the element */
@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

Изменение размера шрифта с помощью запросов мультимедиа

Также можно использовать запросы мультимедиа для изменения размера шрифта элемента на различных размерах экрана:

Пример

/* If screen size is more than 600px wide, set the font-size of <div> to 80px */
@media screen and (min-width: 600px) {
  div.example {
    font-size: 80px;
  }
}

/* If screen size is 600px wide, or less, set the font-size of <div> to 30px */

Гибкая Галерея изображений

В этом примере мы используем мультимедийные запросы вместе с Flexbox для создания адаптивной галереи изображений:

Пример

Гибкий сайт

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

Пример

Ориентация: портрет/пейзаж

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

Вы можете иметь набор свойств CSS, которые будут применяться только в том случае, если окно обозревателя шире, чем его высота, так называемая «Ландшафтная» ориентация:

Пример

Используйте цвет фона лигхтблуе, если ориентация находится в альбомном режиме:

@media only screen and (orientation: landscape) {
    body {
        background-color: lightblue;
    }
}

Минимальная ширина до максимальной ширины

Можно также использовать значения (max-width: ..) and (min-width: ..) для задания минимальной ширины и максимальной ширины.

Например, если ширина обозревателя находится между 600 и 900px, измените внешний вид элемента <div>:

Пример

@media screen and (max-width: 900px) and (min-width: 600px) {
  div. example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

Использование дополнительного значения: В приведенном ниже примере мы добавляем дополнительный мультимедийный запрос к уже существующему, используя запятую (это будет вести себя как оператор OR):

Пример

/* When the width is between 600px and 900px OR above 1100px — change the appearance of <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

CSS @media ссылка

Для полного обзора всех типов носителей и функций/выражений, пожалуйста, посмотрите на @media правило в нашей ссылке CSS.

Совет: Чтобы узнать больше о адаптивном веб-дизайне (как ориентироваться на различные устройства и экраны), используя точки останова для запросов мультимедиа, прочитайте наш учебник по адаптивному веб-дизайну.

❮ Назад Дальше ❯

Под какие основыные размеры настраивать CSS @media screen? — Хабр Q&A

Всегда использую эти( это старые брэйкпоинты bootstrap по умолчанию ):

/* Large desktops and laptops */
media (min-width: 1200px) {

}

/* Portrait tablets and medium desktops */
media (min-width: 992px) and (max-width: 1199px) {

}

/* Portrait tablets and small desktops */
media (min-width: 768px) and (max-width: 991px) {

}

/* Landscape phones and portrait tablets */
media (max-width: 767px) {

}

/* Landscape phones and smaller */
media (max-width: 480px) {

}

По надобности дописую промежуточные разрешения, если вдруг по дизайну что то падает на 650px, тогда дописую:

media (max-width: 650) {

}

Ответ написан более трёх лет назад

Для себя обычно беру наиболее распространенные (desktop first):

Ответ написан 2015, в 15:13″> более трёх лет назад

я всегда смотрю на сайте какие медия более популярны.
по стандарту использую такую сетку:

1200 +
980 — 1199
769 — 979
640 — 768 (чтоб мелкие таблеты в portrait могли получить визуализацию эдентичную телефонам)
до 639 или 640 (зависит от проекта)
иногда добавляю 320 и 480

когда проект большой беру сетку бутстрапа и допиливаю

Ответ написан более трёх лет назад

Погуглите самые популярные разрешения для разных устройств (мобильники, планшеты). И выберите для себя 2-3 стоп-точки, на которых вы будете менять стили. Вот и весь секрет.

Ответ написан 2015, в 14:09″> более трёх лет назад

В свое время тоже задавался таким вопросом, и решил взять за стандарты breakpoints у twitter bootstrap. В этой ссылке приведены breakpoints для различных устройств, их и можете взять bootstrap-ru.com/scaffolding.php#responsive
А вообще, когда начал верстать адаптивные макеты, понял, что лучше не равняться на конкретные breakpoints устройств, а писать их по мере необходимости (сжимаемости) сайта.

Ответ написан

Комментировать

Многое зависит от типа вашего сайта. Если речь идет о каком-нибудь контентном сайте (новости/блог/что-то еще с разношерстной структурой) то тут не обойтись без нескольких мобильных диапазонов (мелкие мобильники, лопаты, планшеты). Если же речь идет о каком-нибудь простом лэндинге, где вся информация представлена «линейно» в вертикальном потоке, то без особых проблем можно взять за основу один брейкпоинт max-width: 921px и делать адаптив под него. + если вы хотите сделать не абы что, вам понадобится дизайнер, который вам нарисует хотя бы мокап мобильной версии.

Ответ написан более трёх лет назад

Комментировать

Большинство устройств попадают под 3 медиа:
media (min-width: 768px) and (max-width: 979px) {}
media (min-width: 481px) and (max-width: 767px) {}
media (max-width: 480px) {}

Ответ написан более трёх лет назад

Комментировать

Согласен с Сергеем (@dpr), привязываться к популярным разрешениям проблематично, так как понадобиться подгонять некоторые элементы. При разработке с нуля пользуюсь этим способом наоборот, так как разрабатываю по принципу «мобильные первые», но суть неизменна.

Ответ написан более трёх лет назад

Не понимаю в чем суть всех вышеуказанных брекпоинтов, достаточно трех:

@media (max-width: 425px) {
	/* MOBILE */
}
@media (min-width: 425px) and (max-width: 1024px){
	/* TABLET */
}
@media (min-width: 1024px) {
	/* DESKTOP */
}

Ответ написан более года назад

CSS media screen

Доброго времени суток дорогие друзья. C развитием интернета и появлением различных устройств появилась необходимость в поддержке отображения сайтов на разных разрешениях. И выходом из этой ситуации стал адаптивный дизайн который подразумевает, что исходный макет сайта будет отображаться удобно и читаемо на всех разрешениях экрана. И именно для этого и были разработаны медиа — запросы которые в буквальном смысле слова позволяют перестраивать(адаптировать) сайт под различные разрешения.

Для того чтобы использовать медиа- запросы нужно прописать в теге head следующий мета тег:

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

после этого мы смело можем приступать к написанию нашего первого медиа запроса.

Допустим у нас есть следующий код:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <title>
            Медиа запросы
        </title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
    <style>
        #text:before {
            Content:"Разрешение для экранов больше 1200px(Компьютер, телевизор, ноутбуки)";
        }
        @media screen and (max-width: 1200px) {
            #text:before {
                Content:"Разрешение для экранов до  1200px  (ноутбуки)";
            }
        }

        @media screen and (max-width: 800px) {
            #text:before {
                Content:"Разрешение для экранов   до 800px(планшеты)";
            }
        }
        @media screen and (max-width: 320px) {
            #text:before {
                Content:"Разрешение для экранов   до 800px(смартфоны)";
            }
        }
    </style>
        <span></span>
    </body>
</html>

здесь мы написали три медиа запроса которые с помощью псевдоселектора before сменяют сообщение при изменении разрешений. Как вы наверное уже догадались первый медиа запрос срабатывает на отметке в 1200px, затем второй на 800px и третий на отметке 320px.

Для того чтобы увидеть эффект изменений при смене разрешения экрана мы можем поступить двумя способами первый, это нажимая горячую клавишу ctrl + + и тем самым постепенно уменьшая разрешение. А второй зайти в инструменты разработчика в браузере и найти опцию при которой мы можем регулировать разрешения экрана в ручную. Я пользуюсь браузером google chroome поэтому нажимаю горячую клавишу ctrl+shift+j переходя в консоль и верхнем меню слева от слова console кликаю на значок в виде экранов. И в результате вверху отображается текущее разрешение экрана и я теперь могу используя мышку менять разрешение экрана, тем самым наблюдая как срабатывают медиа запросы.

Давайте теперь поподробнее разберем структуру медиа запроса:

@media screen and (max-width: 1200px) {
		/*Стили css */
        }

все медиа — запросы начинаются с ключевого слова @media screen and затем в скобочках у нас идет максимальная ширина разрешения больше которой медиа запрос не срабатывает.

То есть, если наше разрешение экрана больше 1200px, то данный медиа запрос выполняться не будет. Если мы вместо max-width в медиа запросе напишем min-width:

@media screen and (min-width: 1200px) {
		/*Стили css */
        }

здесь будет обратная ситуация, данный медиа запрос будет выполняться если разрешение экрана не меньше 1200px. Под стилями css в медиа запросах подразумеваются селекторы и их свойства css.

@media screen and (max-width: 1200px) {
    body{
        background:green;
    }
}

здесь прописано что если разрешение экрана меньше 1200px фон тега body становиться зеленным.

Мы можем также задавать интервал:

@media screen and (min-width: 800px)  and (max-width: 1200px) {
    body{
        background:green;
    }
}

тут зеленый фон к тегу body применяется в интервале разрешения ширины от 800px до 1200px.

И напоследок давайте с вами рассмотрим еще одну из возможностей которую предоставляют нам медиа запросы, а именно подключение файлов css при изменении разрешений:

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

эта строчка прописывается в теге head, в атрибуте media указывается условие медиа запроса, а href путь к css файлу который будет подключен при выполнении условия медиа запроса.

В нашем случае при разрешении экрана меньше 1200px на нашу страницу будут подключаться стили расположенные в файле media.css

На этом дорогие друзья я с вами прощаюсь, надеюсь данная статья была для вас полезна.

Желаю удачи и успехов, как в жизни так и в программировании. Пока!

Медиа-запросы CSS3 — примеры

❮ Предыдущий Далее ❯

Запросы мультимедиа CSS — дополнительные примеры

Давайте рассмотрим еще несколько примеров использования запросов мультимедиа.

Медиа-запросы — популярный метод доставки адаптированной таблицы стилей на различные устройства. Чтобы продемонстрировать простой пример, мы можем изменить цвет фона для разных устройств:

Пример

/* Установите цвет фона тела на коричневый */
body {
цвет фона: коричневый;
}

/* Вкл. экраны с разрешением 992 пикселя или меньше установите синий цвет фона */
@media экран и (максимальная ширина: 992 пикселя) {
  тело {
цвет фона: синий;
  }
}

/* На экранах с разрешением 600 пикселей и меньше установить цвет фона на оливковый */
@media screen and (max-width: 600px) {
body {
    background-color: оливковый;
  }
}

Попробуйте сами »

Вам интересно, почему мы используем именно 992px и 600px? Это то, что мы называем «типичными точками останова» для устройств. Вы можете узнать больше о типичных точках останова в нашем учебнике по адаптивному веб-дизайну.

Медиа-запросы для меню

В этом примере мы используем медиа-запросы для создания адаптивного меню навигации, которое варьируется в дизайне на разных размерах экрана.

Большие экраны:

Главная Ссылка 1 Ссылка 2 Ссылка 3

Маленькие экраны:

Главная Ссылка 1 Ссылка 2 Ссылка 3

Пример

/* Контейнер панели навигации */
. topnav {
 overflow: hidden;
цвет фона: #333;
}

/* Ссылки панели навигации */
.topnav a {
  float: оставил;
  отображение: блок;
  цвет: белый;
  выравнивание текста: по центру;
  отступ: 14 пикселей 16 пикселей;
  text-decoration: нет;
}

/* На экранах шириной 600 пикселей или меньше, сделать так, чтобы ссылки меню располагались сверху друг друга, а не рядом друг с другом */
Экран @media и (максимальная ширина: 600 пикселей) {
.topnav a {
    с плавающей запятой: нет;
    ширина: 100%;
  }
}

Попробуйте сами »

Медиа-запросы для столбцов

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

Большие экраны:

Средние экраны:

Маленькие экраны:

Пример

/* Создаем четыре одинаковых столбца, которые плавают рядом друг с другом */
. column {
плыть налево;
  ширина: 25 %;
}

/* На экранах с разрешением 992 пикселя широкий или менее, перейти от четыре столбца в два столбца */
@media screen and (max-width: 992px) {
.column {
    ширина: 50 %;
  }
}

/* На экранах, 600 пикселей в ширину или меньше, сделайте столбцы располагаются друг над другом, а не рядом друг с другом */
@media экран и (макс. ширина: 600 пикселей) {
  .column {
    ширина: 100%;
  }
}

Попробуйте сами »

Совет: Более современный способ создания макетов столбцов — использование CSS Flexbox (см. пример ниже). Однако он не поддерживается в Internet Explorer 10 и более ранних версиях. Если вам требуется поддержка IE6-10, используйте числа с плавающей запятой (как показано выше).

Чтобы узнать больше о модуле Flexible Box Layout, прочитайте нашу главу CSS Flexbox.

Чтобы узнать больше об адаптивном веб-дизайне, прочитайте наш учебник по адаптивному веб-дизайну.

Пример

/* Контейнер для флексбоксов */
.row {
  display: flex;
flex-wrap: обернуть;
}

/* Создать четыре одинаковых столбца */
.column {
  flex: 25%;
отступ: 20 пикселей;
}

/* На экранах шириной 992 пикселя или меньше перейдите от четыре столбца в два столбца */
@media screen and (max-width: 992px) {
.столбец {
    гибкость: 50 %;
  }
}

/* На экранах шириной 600 пикселей или меньше сделайте столбцы располагаются друг над другом, а не рядом */
@media screen and (max-width: 600px) {
  .row {
flex-направление: столбец;
  }
}

Попробуйте сами »

Скрытие элементов с помощью медиа-запросов

Другое распространенное использование медиа-запросов — скрытие элементов на экранах разных размеров:

Я буду скрыт на маленьких экранах.

Пример

/* Если размер экрана меньше 600 пикселей, скрыть элемент */
@media экран и (максимальная ширина: 600 пикселей) {
  div.example {
дисплей: нет;
  }
}

Попробуйте сами »

Изменение размера шрифта с помощью мультимедийных запросов

Вы также можете использовать мультимедийные запросы для изменения размера шрифта элемента на различные размеры экрана:

Пример

/* Если размер экрана больше 600 пикселей в ширину, установите размер шрифта

 @media screen and (max-width: 1024px){
    img.bg {
        слева: 50%;
        поле слева: -512px; }
}
 

 @media screen и (max-width: 800px) {
  # логотип {
    поплавок: нет;
    маржа: 0;
    выравнивание текста: по центру;
    дисплей: блок;
    ширина: авто;
  }
}
 

 @media all and (max-width: 600px) {
  .навигация {
    -webkit-flex-flow: перенос столбцов;
    flex-flow: перенос столбца;
    заполнение: 0;
  }
 

 @media screen и (max-width: 59em){
    p.site-описание {
        дисплей: блок;
    }
}
 

 @медиаэкран и (минимальная ширина: 769 пикселей) {
    /* СТИЛИ ЗДЕСЬ */
}
Экран @media и (минимальная ширина устройства: 481px) и (максимальная ширина устройства: 768px) {
    /* СТИЛИ ЗДЕСЬ */
}
Только экран @media и (max-device-width: 480px) {
    /* СТИЛИ ЗДЕСЬ */
}