Max width min width media: CSS3-медиазапросы

Как объединить min-width и max-width в одном запросе media

Этот запрос media работает не так, как я ожидал.

Что я хочу сделать, так это скрыть элемент, если окно находится ниже 544px, а также скрыть его, если оно находится выше 767px. Таким образом, он будет виден только тогда, когда окно находится между 544px и 767px.

@media (max-width: 544px) and (min-width: 767px) {
    .show-sm-only {
        display: none !important;
    }
 }

Кажется, что они работают по отдельности, но не вместе.

Как мне этого добиться?

css

Поделиться

Источник

Greg Gum    

13 августа 2016 в 19:14

3 ответа

• @media (min-width: ) и (max-width: ) запрос не работает должным образом

  я использую запрос @media для преобразования моей страницы html в отзывчивую страницу, но я застрял, чтобы преобразовать свою страницу в отзывчивую страницу. Я использую @media(min-width:480px) and (max-width:959px) { body { background-color:red; } } в моем коде css но цвет фона меняется, когда…

• Min-width и Max-width css media запросов

  <link href=css/mobile-large.css media=all and (min-width: 481px) and (max-width: 760px) rel=stylesheet type=text/css /> Разве эта строка кода не должна делать так, чтобы таблица стилей mobile-large.css загружалась при использовании Samsung Galaxy Nexus с шириной 720px? Однако это не так, в…

18

Вы можете объединить два запроса media в один, например:

@media (max-width: 544px), (min-width: 767px) {
.show-sm-only {
    display: none !important;
}
}

РЕДАКТИРОВАТЬ Это скроет .show-sm-only на экране меньше (максимальная ширина) 544px и на экране больше (минимальная ширина) 767px.

Поделиться

zarcode    

13 августа 2016 в 19:25

13

Если вам нужен запрос media, который применяется, когда условия BOTH истинны (что, я думаю, именно то, что вы ищете здесь), используйте другой and . Здесь он скрыт по умолчанию и виден только в диапазоне от 544px до 767px.

.my-element {
  display: none;

  @media (min-width: 544px) and (max-width: 767px) {
    display: block;
  }
}

Поделиться

mukey    

19 июля 2017 в 21:02

4

Если вы этого хотите, ваши правила неверны. Прямо сейчас вы говорите, что он должен быть меньше (максимальная ширина) 544px, но больше (минимальная ширина) 767px, что невозможно. Смотрите ниже, как они работают в обратном направлении.

ОТРЕДАКТИРУЙТЕ в соответствии с комментариями. Чтобы сделать or (вместо and , что для вашей ситуации невозможно), разделите запятую:

@media (max-width: 544px), (min-width: 767px) {
    .show-sm-only {
        display: none !important;
    }
 }

Поделиться

Nick Bull    

13 августа 2016 в 19:17

Похожие вопросы:

Преимущества использования max-width, а также min-width в последовательных запросах media?

В случае, когда существует четкая серия точек останова и связанных с ними запросов media, причем каждый запрос media изменяет одно и то же свойство(ы), есть ли какое-либо преимущество в добавлении…

Установите «min-width» или «max-width» в запросе media, передавая параметр миксину

Я хотел бы сделать динамический суффикс MIN/MAX в свойствах, определенных в A Less MediaQuery. Я написал этот код, но он не компилируется: @screen-md: 800px; .MEDIAQUERY(@min-max, @size) { @media…

Изменение media запросов с min-width на max-width, чтобы избежать переопределения?

Вместо того, чтобы иметь один огромный файл responsive.css. Я включаю запросы media в один и тот же stylsheet, чтобы сохранить все вместе, например, у меня есть файл wizard.css, с: span.crumbsTxt {…

@media (min-width: ) и (max-width: ) запрос не работает должным образом

я использую запрос @media для преобразования моей страницы html в отзывчивую страницу, но я застрял, чтобы преобразовать свою страницу в отзывчивую страницу. Я использую @media(min-width:480px) and…

Min-width и Max-width css media запросов

<link href=css/mobile-large.css media=all and (min-width: 481px) and (max-width: 760px) rel=stylesheet type=text/css /> Разве эта строка кода не должна делать так, чтобы таблица стилей…

CSS media запросов min-width и min-device-width конфликтующих?

Я очень новичок в мире запросов media, и ясно, что мне не хватает чего-то фундаментального в разнице между шириной и шириной устройства-кроме их очевидных возможностей таргетинга. Я хотел бы…

CSS media запросов-min-device-width и max-device-width

У меня есть проблема с добавлением CSS для конкретного устройства. Я запустил свое приложение на этих двух симуляторах: ширина: 320 и высота: 500 ширина: 320 и высота: 588 Теперь моя проблема в том,…

Media запросов min-width VS max-width для адаптивного веб-сайта

С давних пор я использую следующие media запросов для создания адаптивных веб-сайтов // Large devices (desktops, less than 1200px) @media (max-width: 1199px) { … } // Medium devices (tablets, less…

Как объединить max-width, min-width в запросе matchMedia?

Я работаю с matchMedia API, чтобы определить видовые экраны внутри javascript,поэтому я могу свести к минимуму количество манипуляций dom. Вместо того чтобы использовать display: none везде, я…

@media ландшафт работает, но min-width и max-width не работают

Я пытаюсь использовать @media для изменения фонового изображения моего сайта Почему-то, когда я использую @media (orientation: landscape) , это работает нормально, но когда я использую min и max…

css — css медиа-запросы не работают для определенных разрешений

Я использую контрольные точки css media, чтобы оптимизировать шрифты и тому подобное для разных устройств. Все работает, кроме двух моих точек останова, но странным образом.

Я использую консоль разработчика Google Chrome, чтобы проверить все это. @media only screen and (min-device-width: 1440px) and (max-device-width: 1919px) для устройства, которое является 1440px x 900px, поэтому ширина равна 1440.

Однако медиа-запрос будет работать, только если я установлю его на @media screen only and (min-device-width: 900px) and (max-device-width: 1919px), что для меня не имеет никакого смысла.

@media only screen and (min-device-width: 320px) and (max-device-width: 500px) {
  /* Works */
}
@media only screen and (min-device-width: 960px) and (max-device-width: 1023px) {
  /* Works */
}
@media only screen and (min-device-width: 1024px) and (max-device-width: 1279px) {
  /* Works */
}
@media only screen and (min-device-width: 1360px) and (max-device-width: 1439px) {
  /* Works */
}
@media only screen and (min-device-width: 1440px) and (max-device-width: 1919px) {
  /* Doesn't Work */
}
@media only screen and (min-device-width: 1920px) and (max-device-width: 2499px) {
  /* Works */
}
@media only screen and (min-device-width: 2500px) and (max-device-width: 3839px) {
  /* Works */
}

0

Mr.Smithyyy

13 Июл 2015 в 21:38

2 ответа

Лучший ответ

Попробуйте это: http://codepen.io/anon/pen/rVKLOM

Я изменил некоторые ценности. были пробелы по ширине.

.test {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  height: 200px;
  background-color: #e41;
  color: #fff;
  font-family: Helvetica;
  box-sizing: border-box;
  padding: 50px;
  width: 400px;
}



  @media only screen and (min-width: 320px) and (max-width: 959px) {
  .test::before { content: '320px - 959px'; }
}
@media only screen and (min-width: 960px) and (max-width: 1023px) {
  .test::before { content: '960px - 1023px'; }
}
@media only screen and (min-width: 1024px) and (max-width: 1359px) {
  .test::before { content: '1024px - 1359px'; }
}
@media only screen and (min-width: 1360px) and (max-width: 1439px) {
  .test::before { content: '1360px - 1439px'; }
}
@media only screen and (min-width: 1440px) and (max-width: 1919px) {
  .test::before { content: '1440px - 1919px'; }
}
@media only screen and (min-width: 1920px) and (max-width: 2499px) {
  .test::before { content: '1920px - 2499px'; }
}
@media only screen and (min-width: 2500px) and (max-width: 3839px) {
  .test::before { content: '2500px - 3839px'; }
}

3

Muhammad Umer
13 Июл 2015 в 18:57

Не знаю, поможет ли это, но после многих часов путаницы выяснилось, что я пропустил: <meta name="viewport" content="width=device-width, initial-scale=1">.

Теперь все вернулось к норме -.-

0

Quin
19 Авг 2017 в 20:16

Адаптивность сайтов (media) с помощью CSS

Более 50% посетителей сайтов используют мобильные платформы. В основном это телефоны. В меньшей степени планшеты. Но в любом случае сайт должен хорошо отображаться для всех ширин устройств, иначе пользователи быстро уйдут с него.

Поисковые системы (google, yandex и др.) стараются не показывать в результатах поиска сайты, у которых нет мобильной адаптации. А учитывая что 80% посетителей приходят именно по поисковым запросам, то адаптация сайта для мобильных платформ становится обязательной. Иначе можно не рассчитывать на высокую посещаемость.

Чтобы часть кода показывалась только при определённых условиях, в CSS есть media запросы. Рассмотрим пример CSS кода:

.menu {display: block;}

@media (max-width: 600px) {
   .menu {display: none;}
}

Сначала этот код задаёт свойство «display: block» для элемента с классом menu. Но затем этой свойство меняет значение на «display: none«, если ширина страницы менее 600 пикселей. Так и происходит адаптация сайта под различную ширину.

Как и со всеми другими примерами CSS, свойства могут перезаписываться несколько раз. Рассмотрим такой код:

.menu {display: block;}

@media (max-width: 800px) {
   .menu {display: inline-block;}
}

@media (max-width: 600px) {
   .menu {display: none;}
}

При открытии страницы в окне шириной менее 600 пикселей будут выполнен CSS код, который стоит внутри двух media запросов. Сначала у элемента с классом menu свойство display станет равным «block», затем станет равным «inline-block» и в конце примет значение «none». Если ширина окна будет чуть больше 600 пикселей, то выполнится только код внутри первого media запроса.

Есть возможно задавать не только максимальную, но и минимальную ширину браузера. К примеру, CSS код внутри блока

@media (min-width: 600px) { }

будет выполняться уже при ширине экрана более 600 пикселей. То есть преимущественно на планшетах и персональных компьютерах с большими экранами.

В media запросах можно использовать логические операторы. К примеру, оператор «and»:

@media (min-width: 600px) and (max-width: 800px){ }

— такой CSS код будет выполняться только при ширине окна от 600 до 800 пикселей.

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

Медиазапросы | CSS: Адаптивность

Одним из самых важных инструментов при создании адаптивной вёрстки является использование медиазапросов. Медиазапросы — специальные условные конструкции, которые позволяют применять стили только для определённых устройств. В уроке на Code Basics уже освещалась эта тема, но повторим её.

Медиазапросы записываются следующим образом:

@media (условия) {
  /* CSS-код, который будет выполнен для данного условия */
}

В качестве условия могут выступать различные значения и константы. Зачастую используются следующие конструкции:

Ориентация экрана

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

1. landscape. Условие выполнится для устройств с горизонтальной ориентацией экрана. Горизонтальная — ориентация, при которой ширина viewport больше его высоты.
2. portrait. Условие выполнится для устройств с вертикальной ориентацией экрана. Вертикальная — ориентация, при которой высота viewport больше его ширины.

<style>
  @media (orientation: landscape) {
    /* При горизонтальной ориентации фоновым цветом сайта будет белый */
    body {
      background: #FFF;
    }
  }

  @media (orientation: portrait) {
    /* При вертикальной ориентации фоновым цветом сайта будет чёрный */
    body {
      background: #000;
    }
  }
</style>

Разрешение экрана

При использовании медиазапросов мы также можем исходить из ширины или высоты viewport. Для этого используются знакомые нам по обычным CSS-правилам условия width, min-width, max-width для ширины и height, min-height, max-height для высоты.

С помощью таких условий создаются breakpoint — контрольные точки. Это границы значений, по которым видоизменяется наш макет. Такие точки остановки позволяют иметь правила для мониторов, планшетов, телефонов, кофеварок.

<style>
  /* Здесь будут все стили для устройств с viewport больше 1400 пикселей. */

  @media (max-width: 1400px) {
    /* Стили для устройств, у которых ширина viewport меньше 1400 пикселей, но больше 990 пикселей. Эти стили будут использованы для планшетов и ноутбуков с низким разрешением */
  }

  @media (max-width: 990px) {
    /* Стили для устройств, у которых ширина viewport меньше 990 пикселей, но больше 770 пикселей. Эти стили подойдут для некоторых мобильных устройств и планшетов */
  }

  @media (max-width: 770px) {
    /* Стили для устройств, у которых ширина viewport меньше 770 пикселей. Это множество мобильных устройств */
  }
</style>

Обратите внимание на порядок написания свойств. Помните, что CSS является каскадной таблицей, поэтому порядок стилей необходимо контролировать. В данном случае к элементу вначале будет применён стиль по умолчанию, который не находится в медиазапросе, затем поочерёдно будут применяться стили в зависимости от значений в условии медиазапроса.

Например, при ширине viewport 770 пикселей для элемента стили применятся в следующем порядке:

• Стили по умолчанию.
• Стили для условия медиазапроса max-width: 1400px.
• Стили для условия медиазапроса max-width: 990px.
• Стили для условия медиазапроса max-width: 770px.

Подход, описанный выше называется Desktop First. Мы вначале пишем стили для больших мониторов, а в последствии, используя медиазапросы, дописываем стили для всё более маленьких значений viewport. Его характерная черта в медиазапросах — использование конструкции max-width в качестве условия.

В противовес Desktop First существует подход Mobile First. Его особенностью является то, что вначале пишутся стили под мобильные устройства, а затем, используя медиазапросы, пишутся стили для больших размеров viewport. Если в Desktop First основной конструкцией являлось использование max-width, то в Mobile First используется min-width.

Стили, написанные с использованием подхода Mobile First выглядят следующим образом:

<style>
  /* Здесь будут все стили для мобильных устройств с viewport меньше 770 пикселей. */

  @media (min-width: 770px) {
    /* Стили для устройств, у которых ширина viewport больше 770 пикселей. */
  }

  @media (min-width: 990px) {
    /* Стили для устройств, у которых ширина viewport больше 990 пикселей, но меньше 1400 пикселей. */
  }

  @media (min-width: 1400px) {
    /* Стили для устройств, у которых ширина viewport больше 1400 пикселей */
  }
</style>

Логические операторы

Условия внутри медиазапросов можно комбинировать. Для этого существует три логических оператора:

• Логическое «И». Означает, что несколько условий должны быть выполнены для того, чтобы CSS-стили применились к элементу. Для использования логического «И» используется ключевое слово and. Сделаем условие, которое проверяет, что экран устройства находится в портретной (вертикальной) ориентации и имеет ширину viewport не меньше 600 пикселей:

<!— end list —>

<style>
  @media (orientation: portrait) and (min-width: 600px) {
    .container {
      /* Для устройств с портретной ориентацией и шириной viewport не менее 600 пикселей сделать элементы с классом container шириной в 100 процентов */
      width: 100%;
    }
  }
</style>

• Логическое «ИЛИ». Свойства применятся в том случае, если хотя бы одно из условий будет выполнено. Условия для этого отделяются запятыми. Возьмём прошлый пример и применим его с использованием «ИЛИ»:

<!— end list —>

<style>
  @media (orientation: portrait), (min-width: 600px) {
    .container {
      /* Для устройств с портретной ориентацией ИЛИ шириной viewport не менее 600 пикселей сделать элементы с классом container шириной в 100 процентов */
      width: 100%;
    }
  }
</style>

• Логическое «НЕ». Свойства применятся в том случае, если условие не выполняется. Используется ключевое слово not. Реальное использование этого оператора не велико, в виду сложности и не интуитивности происходящего. В связи с этим советую воздержаться в первое время от использования ключевого слова not.

<!— end list —>

<style>
  @media not all and (orientation: landscape) {
    .container {
      /* Для устройств с портретной ориентацией (условие выглядит как «НЕ горизонтальная») сделать элементы с классом container шириной в 100 процентов */
      width: 100%;
    }
  }
</style>

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

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Подключение CSS файлов</title>

    <!-- Общие стили для проекта -->
    <link rel="stylesheet" href="style.css">

    <!-- Стили для экранов с viewport не менее 750px -->
    <link rel="stylesheet" media="screen and (min-width: 750px)" href="style750px.css">

</head>
<body>
    <!-- Разметка проекта -->

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

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

Media-screen примеры

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

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

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

<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;
}

#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; /* Смещаем логотип вправо */			
	}
   }

@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)"/>

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

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

css — Media Queries min-width VS max-width для адаптивного веб-сайта

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

Что касается порядка запросов @media , единственный аргумент в пользу использования mobile-first вместо desktop-first — , он звучит лучше для людей, которые не понимают, что это означает . Так что вы всегда можете ответить своим клиентам / начальнику, когда они спросят:

— Это «сначала мобильные»?
— Конечно, мы используем новейшие технологии …

Но в реальном мире, пока ваши запросы @media применяют правильный код к каждому интервалу времени отклика, вы делаете-это- правильно .

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

• запись действующего кода
• запись кросс-девайсного / кроссбраузерного кода
• написание обслуживаемого и легко читаемого кода (для вас и других разработчиков)
• пишет меньше кода для той же функциональности.

Что касается с использованием em против px , это вторая попытка Bootstrap выгрузить px для em в запросах @media .Насколько мне известно, первая попытка была отклонена из-за отсутствия поддержки и различий в расчете em на значительной части мобильных браузеров в то время. Однако здесь необходима цитата, и я не могу найти ничего об этом обсуждении, которое я читал ~ 2 года назад. Я даже не уверен, был ли это примерно v3 или прототип v4 , который выпускался в то время. Я думаю, что это был v4 .
В любом случае, если они решили использовать em в v4, возможно, теперь использовать em безопасно.
Edit: Если присмотреться к v4 beta — выпущенной всего 9 дней назад, похоже, что то, что вы цитировали, взято из файла scss , позже проанализированного на запросы px в окончательный код dist . Итак, я предполагаю, что обсуждение, которое я помню, что я читал, актуально и сегодня. В заключение я бы посоветовал не использовать em в ваших запросах CSS @media .

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

Если вам действительно нужно позаботиться об этом, в зависимости от различий между ними, вы должны оценить объем кода, который вы бы переопределили, если весь ваш существующий (экран , экран ) применен к print vs write all print Код с нуля.

Если первый быстрее, не добавляйте screen к своим запросам и помещайте переопределения @media print последними.
Если последнее работает быстрее, оберните существующий код внутри @media screen , добавьте screen к существующим запросам, как это делает Bootstrap, и поместите свой код print внутри другого @media print , чтобы он не влияет на экран .

Примечание: Я предпочитаю первый метод, так как это практический подход, легко тестируемый и обычно приводящий к написанию меньшего количества кода.

Разница между свойством CSS width, min-width и max-width

Фотография на обложке: Маркус Списке на Unsplash.

CSS

имеет три свойства, связанных с шириной, а именно:

• ширина
• минимальная ширина
• максимальная ширина

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

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

Сначала мы подробно обсудим свойства с наглядными примерами. Затем мы обсудим их сходства и различия.

Давайте нырнем.

Ширина свойство

Свойство width используется для определения ширины элемента при отображении в браузере.Рассматриваемый элемент должен быть изображением, элементом уровня блока или встроенным элементом , имеющим свойство display блока или встроенного блока .

Свойство принимает в качестве значений комбинацию номеров и допустимых единиц измерения CSS.

  / **
 * Блок em может быть заменен другими блоками, такими как
 * px,%, vmin, vmax и т. д.
 * /
.selector {
    ширина: 30em; / * Занимаем 30em родительского контейнера * /
}
  

Войти в полноэкранный режимВыйти из полноэкранного режима

Минимальная ширина свойство


Это свойство, как следует из названия, определяет минимальную ширину элемента уровня блока (или изображения) при визуализации в браузере.Это означает, что если дочерний элемент имеет минимальную ширину , например 0.1em элемент будет занимать всю ширину родительского элемента. У него особый случай использования, о котором мы поговорим позже.

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

Подобно свойству width , оно принимает в качестве значений комбинацию чисел и допустимых единиц измерения CSS.

  / **
 * Блок em может быть заменен другими блоками, такими как
 * px,%, vmin, vmax e.t.c.
 * /
.selector {
    минимальная ширина: 30em; / * Занимаем не менее 30em родительского контейнера * /
}
  

Войти в полноэкранный режимВыйти из полноэкранного режима

Свойство max-width


Свойство max-width определяет максимальную ширину элемента уровня блока (или изображения) при визуализации на экране браузером.

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

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

  / **
 * Блок em может быть заменен другими блоками, такими как
 * px,%, vmin, vmax и т. д.
 * /
.selector {
    максимальная ширина: 30em; / * Занять не более 30em родительского контейнера * /
}
  

Войти в полноэкранный режимВыйти из полноэкранного режима

На изображении ниже дочерний элемент имеет значение max-width , равное 30em .В этом окне просмотра он ведет себя так же, как свойство width при сравнении.

Теперь давайте обсудим их сходства и различия.

Сходства и различия между шириной , минимальной шириной и максимальной шириной


Сходства


Все три объекта недвижимости похожи в следующем:

• Они определяют ширину элемента.
• Они принимают числа и допустимые единицы измерения CSS в качестве значений.
• Работа с элементами уровня блока или любыми элементами, имеющими свойство display , отличное от inline . Изображение - исключение.

Отличия


Между этими объектами есть три основных различия, а именно:

• Размер
• Медиа-запросы для адаптивного веб-дизайна
• Адаптивные изображения

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

ширина размер


Размер фиксированный. Следовательно, дочерний элемент, имеющий ширину 30em , будет одинаковым независимо от области просмотра браузера.

На изображении ниже область просмотра достаточно велика, чтобы вместить дочерний и родительский элементы, поэтому нет заметной разницы (как показано в начале этого сообщения).

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

При дальнейшем уменьшении области просмотра в области просмотра браузера происходит переполнение , как показано на изображении ниже.

Но когда мы уменьшаем ширину до 10em , получаем следующий результат:

мин. Ширина размер


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

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

Кроме того, при уменьшении области просмотра в браузере происходит переполнение, как показано на изображении ниже.

Но когда мы уменьшаем ширину дочерних элементов до 10em , что меньше ширины области просмотра, дочерний элемент становится той же ширины, что и родительский элемент.

макс.ширина размер


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

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

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

Когда max-width уменьшается до 10em в этом окне просмотра, он будет вести себя как свойство width .

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


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

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

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

Это минимальная ширина . Сможете угадать, какую собственность мы будем использовать? Это свойство min-width . Минимальная ширина , при которой конструкция нарушается, предоставляется как значение для свойства min-width . Это значение увеличивается каждый раз, когда дизайн ломается, и дизайнерам необходимо изменить макет дизайна.

Этот подход является рекомендуемой практикой под названием «Дизайн для контента, а не разрешение устройства ».

  @media screen и (min-width: 48em) {/ * Обратите внимание на свойство min-width * /
    / **
     * Блоки кода в этом медиа-запросе
     * будет работать только для устройств с как минимум
     * 48em. Предполагая, что размер шрифта по умолчанию составляет 16 пикселей,
     * это будет 48 * 16 = 768 пикселей. 768 пикселей - это минимум
     * ширина устройства iPad (по состоянию на август 2020 г.).
     * /
}
  

Войти в полноэкранный режимВыйти из полноэкранного режима

Свойство max-width весьма полезно, когда дизайн изначально предназначен для больших разрешений и его необходимо уменьшить для меньших.

  @media screen and (max-width: 48em) {/ * Обратите внимание на свойство max-width * /
    / **
     * Блоки кода в этом медиа-запросе
     * будет работать только для устройств с не более
     * 48em, т.е. размер экрана 768 пикселей и ниже.
     * Предполагается, что размер шрифта по умолчанию составляет 16 пикселей.
     * /
}
  

Войти в полноэкранный режимВыйти из полноэкранного режима

Свойство width не является подходящим кандидатом для изменения содержания при выполнении адаптивного веб-дизайна.

Адаптивные изображения


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

Теперь вопрос: как сделать изображения адаптивными?

Ответ прост: max-width . Этим это свойство отличается от своих аналогов i.е. ширина и минимальная ширина .

В некоторых случаях свойство width сделает ваши изображения «отзывчивыми», когда вы заставите изображения занимать всю ширину его родительского контейнера.

  .image-selector {
    ширина: 100%;
}
  

Войти в полноэкранный режимВыйти из полноэкранного режима

Рекомендуется использовать свойство max-width .

  .image-selector {
    максимальная ширина: 100%; / * Никогда не превышайте родительский контейнер.* /
}
  

Войти в полноэкранный режимВыйти из полноэкранного режима

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

Эти различия приведены в следующей таблице.

Заключение


В этой статье мы обсудили свойства width , min-width и max-width , включая их сходства и различия, но это не исчерпывающий и не конец всего.Я рекомендую вам провести дальнейшее исследование.

Если будут вопросы, буду рад ответить на них в комментариях.

диапазонов медиа-запросов ›zzzzBov.com

Спецификация Media Queries Level 4 представила новый синтаксис диапазона для медиа-запросов.

  @media (480 пикселей <= ширина <768 пикселей)  

Это особенно полезно, потому что медиа-запросы min- * и max- * всегда включают их граничные значения.

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

  @media (max-width: 768px) {
  .пример {
    отступ: 10 пикселей;
    ширина: 100%;
  }
}

@media (min-width: 768 пикселей) {
  .пример {
    // ах ах! Будут применяться и поля, и отступы.
    // когда ширина браузера ровно 768 пикселей 😱
    маржа: 15 пикселей;
    ширина: 200 пикселей;
  }
}  

Классическое решение - убедиться, что граничные значения отличаются на 1 пиксель.

  @media (max-width: 767px) {...}
@media (min-width: 768 пикселей) {...}  

Это отлично работает для единиц в пикселей , но может быть проблематичным для значений, использующих em .

  @media (max-width: 29em) {...}
@media (min-width: 30em) {...} // значительный зазор  

Поскольку единицы em могут быть изменены пользователем с помощью настроек размера шрифта браузера, я обычно использовал 0,001 в качестве значения "epsilon", чтобы убедиться, что значения em меньше 1px друг от друга, при этом все еще не вызывая перекрытия диапазона:

  @media (максимальная ширина: 29.999em) {...}
@media (min-width: 30em) {...}  

Синтаксис диапазона для медиа-запросов упрощает это, разрешая как включающие, так и исключающие границы для минимальных- * и максимальных- * границ:

  @media (ширина <30em) {...}
@media (width <= 30em) {...}  

К сожалению, мультимедийные запросы диапазона в настоящее время почти не поддерживаются браузером.

К счастью, есть еще один способ обработки исключительных границ в медиа-запросах, который поддерживает кроссбраузерность.Этот альтернативный метод включает в себя две функции медиа-запросов.

Отрицательные медиа-запросы

Первой функцией медиа-запроса, которая необходима для обработки неперекрывающихся диапазонов медиа-запросов, является оператор медиа-запроса , а не .

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

Оператор not отменяет весь медиа-запрос, к которому он применяется.Например, not screen и (min-width: 480px) соответствует неэкранным устройствам, ширина которых меньше 480 пикселей. Логику лучше выразить как not (screen and (min-width: 480px)) , хотя в противном случае это могло бы выглядеть как (not screen) и (min-width: 480px) .

Более того, оператор , а не применяется только к одному медиа-запросу, даже если в список медиа-запросов в объявлении @media включено несколько.

Например, @media not screen, (min-width: 480px) лучше представить как (not screen) или (min-width: 480px) , хотя может показаться, что его следует применять как not (screen or (min-width: 480px) , учитывая, как , а не ведет себя с и .

Кроме того, для оператора , а не требуется избыточный и подробный тип носителя. Вместо возможности использовать @media not (min-width: 480px) вам нужно будет использовать @media not all и (min-width: 480px) .

При всех этих предостережениях может быть трудно понять, как отрицательные медиа-запросы могут быть полезны для диапазонов медиа-запросов. Преимущество инвертированного диапазона в том, что он включает в себя границы min- * и max- * ...

...к исключительным границам max- * и min- * соответственно.

@media not all и (max-width: 30em) {...} и @media (max-width: 30em) {...} создают непрерывный диапазон с первым медиа-запросом, представляющим ширину на меньше чем 30em, а второй медиа-запрос представляет ширину больше или равную 30em.

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

Вложенные медиа-запросы

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

При использовании вложенных медиа-запросов одно объявление @media может применяться со вторым объявлением @media , которое также применяется в первом. Поскольку это отдельные объявления, оператор , а не применяется только к одному, и они по-прежнему объединяются, как если бы они были объединены с и :

.

  @media screen {
  @media (min-width: 30em) {
    // это применимо только к экранам с шириной больше или равной 30em (480 пикселей)
  }
}  

Nesting имеет неплохую поддержку браузеров, за исключением IE11.На момент написания статьи осталось всего несколько месяцев до того, как Microsoft прекратит поддержку IE.

Теперь все вместе

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

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

  @media (min-width: 30em) {
  @media not all and (min-width: 64em) {
    .пример { … }
  }
}  

Это эквивалент

  @media (30em <= width <64em) {
  .пример { … }
}  

Если мы хотим включить верхние границы, используйте max-width для обеих границ:

  @media not all and (max-width: 30em) {
  @media (max-width: 64em) {
    .пример { … }
  }
}  

Это эквивалент

  @media (30em  

tl; dr:

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

.

  @media (min-width: [нижняя граница]) {
  @media not all и (min-width: [верхняя граница]) {
    .пример { … }
  }
}  

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

  @media ([нижняя граница] <= ширина <[верхняя граница]) {
  .пример { … }
}  

Выбор между медиа-запросами минимальной и максимальной ширины - Haystack

Мне часто задают вариант следующего вопроса:

Следует использовать медиа-запросы минимальной или максимальной ширины?

Очевидный ответ, конечно, «да».Но вы знаете, о чем они спрашивают: какой из двух лучше ?

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

Первый рабочий стол и максимальная ширина

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

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

Это может привести к ситуации, о которой я часто шутил: стилей письма только для того, чтобы потом отменить их . Это пример, который я часто использую (предположим, что . Связанный имеет форму боковой панели):

 
.содержание {
  ширина: 60%;
}

.связанные с {
  ширина: 40%;
}

@media screen и (max-width: 37,4em) {
  .содержание,
  .связанные с {
    ширина: 100%;
  }
}
 
 

В приведенном выше примере многое упущено, но я уверен, что вы уловили идею.Этот подход, когда он используется для набора компонентов, может значительно увеличить объем CSS, необходимый для завершения проекта. Но главная проблема заключается в том, насколько это нелогично, потому что, если принять тот факт, что элементы блочного уровня по умолчанию на 100% являются родительскими, то следующее имеет гораздо больший смысл:

 
@media screen и (min-width: 37,5em) {
  .содержание {
    ширина: 60%;
  }

  .связанные с {
    ширина: 40%;
  }
}
 
 

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

Использование max-width вопреки здравому смыслу

Есть несколько причин, по которым, даже если вы знаете лучше, вы можете сознательно выбрать подход, аналогичный подходу max-width , описанному выше:

1. Вы разработчик и получили от дизайнера композиции только для настольных ПК, для настольных ПК или для других размеров в качестве опоздания.Как ты можешь знать? Если вы разработали или получили дизайн только для настольных компьютеров, то это то, с чем вы имеете дело. Если у вас есть хороший детализированный дизайн, похожий на настольный компьютер, с добавлением нескольких примеров для мобильных устройств или планшетов, то это то, с чем вы имеете дело. В этих случаях может быть с вами max-width , если у вас нет бюджета и / или графика, позволяющего провести рефакторинг во время разработки.
2. Вы делаете существующий веб-сайт адаптивным, а существующий CSS - это дизайнерский багаж, который вы унаследовали и не можете изменить ни по какой причине.
3. Вы компенсируете тот факт, что в настоящее время у нас нет запросов к элементам, и вы обрабатываете это с помощью CSS вместо использования полифила JavaScript для несуществующей спецификации.

Итак, что лучше использовать?

Вот мое пояснение «в зависимости от обстоятельств» для этого конкретного вопроса. И помните, что это всего лишь мое собственное мнение, основанное на моем собственном опыте: посмотрите на отображение данного элемента по умолчанию. Если вам нужно изменить это значение по умолчанию для небольших экранов, используйте max-width .Если значение по умолчанию можно использовать на маленьких экранах, используйте минимальную ширину и только тогда, когда элемент должен отклоняться от значения по умолчанию. И, конечно же, я рекомендую позволить контенту определять, где это происходит.

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

 
@media only screen и (max-width: 30em) {
  .большой стол tr,
  .big-table td {
    дисплей: блок;
  }
}
 
 

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

В этом случае имеет смысл оставить таблицу в форме по умолчанию, за исключением браузеров, которые понимают медиа-запросы и где экран не больше, чем, в данном случае, 30em .

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

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

Спасибо Брэду Фросту за обзор. У него также есть пост со связанными темами.

min-width vs max-with в Media Queries

TIL - краткий способ запомнить разницу между использованием min-width и max-width в медиа-запросе.

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

Запросы, которые я использовал, выглядят так:

  $ small: 600px;

.show-on-mobile {
  @include breakpoint (min-width $ small + 1) {
    дисплей: нет;
  }
}

.hide-on-mobile {
  @include breakpoint (max-width $ small) {
    дисплей: нет;
  }
}  

Примечание: миксин точки останова делает написание медиа-запросов менее подробным и более семантическим.

Вот английские переводы min-width и max-width:

min-width : применяет стили к ширине экрана, большей или равной указанному значению в пикселях. Другими словами, это представляет собой минимальную ширину экрана , при которой применяется стиль . Элементы с классом .show-on-mobile будет иметь стиль display: none; применяется при ширине экрана больше или равной 601 пикселей.

max-width : применяет стили к ширине экрана, меньшей или равной указанному значению в пикселях. Другими словами, это максимальная ширина экрана , при которой применяется стиль . Элементы с классом .hide-on-mobile будут иметь стиль display: none; применяется при ширине экрана меньше или равной 600 пикселей.

Обратите внимание, что .show-on-mobile настроен для применения при ширине экрана 601px и более ... изначально у меня оба этих параметра были установлены на 600 пикселей, но поскольку минимальная и максимальная ширина применяются при значениях, равных указанной ширине в пикселях, оба MQ применялись точно с разрешением 600 пикселей, и кнопки разбивки на страницы исчезли.

Изменение .show-on-mobile на 601px приводит к тому, что мобильный вид отображается с разрешением 600 пикселей, а затем скрывается с 601 пикселей, когда немобильный вид не скрывается (и.hide-on-mobile больше не действует).

Поведение min-width и max-width изменилось в моей голове, когда я начал писать свои MQ. то есть мне несколько противоречит интуиции, что запрос min-width представляет стили, которые будут применяться при ширине, превышающей указанное значение пикселя. Думая об этих свойствах с точки зрения «минимальной ширины, при которой применяется стиль» и «максимальной ширины, при которой применяется стиль», мне кажется более логичным.

Как настроить таргетинг на компьютеры, планшеты и мобильные устройства с помощью Media Query?

< html >

< head >

< Заголовок носителя / title >

< style >

/ * Media Query for Mobile Devices * /

@ медиа (максимальная ширина: 480 пикселей) {

body {

background-color: red;

}

}

/ * Media Query для планшетов и iPad с низким разрешением * /

@media (min-width: 481px ) и (max-width: 767px) {

body {

background-color: желтый;

}

}

/ * Медиа-запрос для планшетных iPad в портретном режиме * /

@media (min-width: 768px) и (max-width: 1024px) {

body {

background-color: blue;

}

}

/ * Медиа-запрос для ноутбуков и настольных ПК * /

@media (минимальная ширина: 1025 пикселей) и (max-width: 1280 пикселей) {

body {

background-color: green;

}

}

/ * Медиа-запрос для больших экранов * /

@media (min-width: 1281px) {

корпус {

цвет фона: белый;

}

}

стиль >

Головка >

body style = "text-align: center;" >

< h2 > GeeksforGeeks h2 >

< h3 > Media Query h3 9007> 9

body >

html >

Media Queries Контрольные точки для адаптивного дизайна в 2021 году - DevFacts | Технический блог | Сообщество разработчиков

Hey Media Queries Точки останова играют основную роль в адаптивном дизайне.Здесь мы обсудим самый стандартный способ в 2021 году

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

Разрешение экрана?

CSS3 Media Queries?

Ширина устройства?

Размеры экрана?

И так далее.

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

Использование минимальной ширины

 

// Маленькие устройства (телефоны с горизонтальной ориентацией, 576 пикселей и выше)
@media (минимальная ширина: 576 пикселей) {...}

// Средние устройства (планшеты, 768 пикселей и выше)
@media (min-width: 768 пикселей) {...}

// Большие устройства (настольные компьютеры, 992 пикселей и выше)
@media (min-width: 992px) {...}

// Очень большие устройства (большие рабочие столы, 1200 пикселей и выше)
@media (min-width: 1200 пикселей) {...}

  

Использование максимальной ширины

 
@media (max-width: 575,98 пикселей) {...}

// Маленькие устройства (телефоны с горизонтальной ориентацией, менее 768 пикселей)
@media (max-width: 767,98 пикселей) {...}

// Средние устройства (планшеты, менее 992 пикселей)
@media (максимальная ширина: 991.98px) {...}

// Большие устройства (рабочие столы, менее 1200 пикселей)
@media (max-width: 1199,98 пикселей) {...}

  

Устройства

В основном смотрел аппараты Apple. Хотя устройства на базе Android тоже важны, они имеют много различий в большинстве телефонов. Надеюсь, для вас это не имеет большого значения.