Max width min width media: CSS Media Min-Width & Max-Width Queries

 Экран @media и (min-width:600px) {
  навигация {
    плыть налево;
    ширина: 25%;
  }
  раздел {
    поле слева: 25%;
  }
}
@media screen и (max-width:599px) {
  нав ли {
    дисплей: встроенный;
  }
}
 

 медиа-запрос-практика
  ├── CSS
  │   └── стили.css
  └── медиа-запрос-сайт.html
 

 
  

    <голова>
      
      
    
    <тело>
       
Медиа-запросы
 
      <дел>
        
Медиа-запросы позволяют нам сделать наши сайты отзывчивыми. Мы можем использовать медиа-запросы для применения стилей CSS только при соблюдении определенных условий. Например, наши сайты могут выглядеть по-разному в зависимости от размера экрана или порта просмотра, в котором пользователь просматривает наш контент. Мы также можем изменить способ отображения нашего сайта, если пользователь печатает наш сайт или использует программу чтения с экрана! 
      

Если мы загрузим наш файл media-query-site. html в браузере, в настоящее время он должен выглядеть так:

Базовая конструкция

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

Они начинаются с @media и содержат набор скобок и фигурных скобок:

стили.css

 @media () {
  }
 

• @media сообщает браузеру, что это медиа-запрос.

• Скобки в конечном итоге будут определять, когда следует применять CSS этого запроса. Мы вернемся к этому через мгновение.

• В конечном итоге фигурные скобки будут содержать CSS, который будет применяться при выполнении условий.

Тип носителя

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

• все : любые и все устройства.

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

• экран : Относится к цветным экранам.

• речь : Относится к программам чтения с экрана, помогающим слабовидящим пользователям.

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

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

styles.css

 @экран мультимедиа () {
}
 

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

Функции носителя

Далее, наш медиа-запрос требует, чтобы мы включили что-то Медиа-функция . Это конкретные свойства и сведения о том, как пользователь просматривает контент. Наиболее часто используемые медиа-функции:

• height : Описывает высоту области просмотра в пикселях. Он также может иметь префикс min или max . Мы можем сказать max-height , чтобы указать максимальную высоту, к которой должен применяться CSS медиа-запроса. Или min-height для определения минимальной высоты.

• ширина : Описывает ширину области просмотра в пикселях. Как и высота , он также может иметь префикс min или max .

• ориентация : Указывает, является ли область просмотра альбомной (ширина, чем высота) или портретной (высота, чем ширина).

• Вы можете узнать о дополнительных, менее распространенных функциях в документации MDN по медиа-запросам.

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

.

styles.css

 Экран @media и (максимальная ширина: 768 пикселей) {
  }
 

Мы сделали здесь пару вещей:

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

• Затем мы включаем max-width: 768px в скобки.

  • ширина - это наша мультимедийная функция.
  • Префикс max указывает, что CSS, который мы в конечном итоге включим в этот медиа-запрос, должен применяться только к окнам просмотра с максимальной шириной 768px .

• 768px просто относится к размеру (в пикселях), который мы хотели бы определить как максимальный. При определении размеров пикселей в CSS 9Требуется суффикс 0007 px .

Точки останова

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

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

Правила CSS медиазапроса

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

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

styles. css

 Экран @media и (максимальная ширина: 768 пикселей) {
    тело {
        цвет фона: черный;
        белый цвет;
    }
}
 

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

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

Однако медленно сужайте окно браузера. Когда он уже 768 пикселей, активируется медиа-запрос; наш фон становится черным, а наш текст становится белым!

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

Мы также можем использовать несколько медиа-запросов одновременно для обработки различных размеров области просмотра и типов медиа. Добавим еще один запрос:

styles.css

 Экран @media и (максимальная ширина: 768 пикселей) {
    тело {
      цвет фона: черный;
      белый цвет;
    }
  }
  Экран @media и (максимальная ширина: 480 пикселей) {
    тело {
      цвет фона: бирюзовый;
    }
  }
 

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

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

Иногда одновременно могут применяться несколько мультимедийных запросов. Например, если окно просмотра меньше 480 пикселей, оба медиа-запроса будут применяться, потому что размер меньше 480 пикселей меньше 9.0357 оба максимальное значение ширины 768 и максимальное значение 480.

Когда применяется несколько мультимедийных запросов, CSS последнего примененного запроса переопределяет CSS других запросов, если они содержат одни и те же селекторы и свойства. В приведенном выше примере background-color , определенный в первом медиа-запросе, переопределяется свойством background-color в нашем втором медиа-запросе, когда окно просмотра уже 480 пикселей.

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

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

Мы могли бы добавить функцию min-width к одному из наших существующих запросов следующим образом:

styles.css

 Экран @media и (максимальная ширина: 768 пикселей) и (минимальная ширина: 600 пикселей) {
    тело {
      цвет фона: черный;
      белый цвет;
    }
  }
  Экран @media и (максимальная ширина: 480 пикселей) {
    тело {
      цвет фона: бирюзовый;
    }
  }
 

Обратите внимание, что между двумя элементами мультимедиа в скобках есть еще и , точно так же, как и между нашим типом носителя и первым элементом. Этот первый запрос указывает нашему сайту применить черный фон и белый текст, когда ширина области просмотра составляет от 768 до 600 пикселей.

Теперь наш сайт начинается с белого фона и без применения стилей:

Когда мы медленно уменьшаем ширину окна браузера, его фон становится черным, а текст становится белым при разрешении 768 пикселей:

Но теперь, когда его ширина меньше 600 пикселей (но ниже ширины 480 пикселей, которая активирует другой медиа-запрос), он снова становится белым:

Тем не менее, как только он достигает 480 пикселей или меньше, он все равно становится бирюзовым:

Больше CSS в медиа-запросах

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